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Introduction 


HTML  And  Beyond 

Admit  it.  You  want  to  have  a  personal  Web  site,  don't  you?  Or 
perhaps  you're  running  a  small  business,  and  you'd  like  to 
include  a  Web  address  on  your  visiting  cards.  And  you  don't 
know  how  to  go  about  it  beyond  the  basic  HTML.  This  book  is  just 
what  you're  looking  for!  For  those  not  familiar  with  basic  HTML 
either,  we've  included  a  chapter  on  that  subject. 

There  are  several  elements  that  go  into  a  professional-looking 
Web  site,  and  we  have  here  tried  to  cover  what  you'd  need  to  build 
one.  After  looking  at  the  basics  of  HTML,  we  go  into  JavaScript  and 
PHP— after  all,  you  don't  want  any  boring  old  static  Web  page,  do  you? 
We've  also  included  material  on  site  design  tools  such  as  FrontPage 
and  Dreamweaver  so  you  make  a  site  with  a  minimum  of  fuss. 
FrontPage  workshops  have  also  been  included. 

Content  Management  Systems,  which  make  it  convenient  to  man- 
age your  Web  site,  have  been  discussed  in  some  detail.  If  you'd  like  to 
put  up  a  forum  on  your  site— which  in  some  cases  is  essential,  and  in 
some  cases  fun— we've  explained  how  to  do  so,  using  easy-to-use  tools. 

After  you've  built  your  site,  you  need  to  upload  it  (don't  forget 
that  bit!)  and  also  check  for  a  few  things— such  as  whether  it  is  com- 
patible with  popular  browsers  and  so  on.  A  chapter  is  dedicated  to 
uploading  and  testing  your  site.  Finally,  we  present  examples  of  well- 
made  sites  and  what  you  can  learn  from  them— and,  complementari- 
ty, what  Web  design  mistakes  to  avoid. 

Web  designing  is  a  profession  all  by  itself.  So  are  JavaScript  coding 
and  PHP  coding.  And  so  also  is  the  building  of  content  management 
systems!  We  obviously  cannot  cover  here  all  that  you  might  need  to 
know,  but  the  enemy  is  inertia.  The  laziness  that  prevents  you  from 
getting  started.  This  book  is  an  introduction,  a  starting  point.  If  you 
find  Web  site  building  is  fun,  you  will  look  further  and  learn. 

On  the  whole,  by  the  time  you've  reached  the  end  of  this  book, 
you  should  know  what  you  need  to  get  a  basic  site  up  and  running— 
the  site  you've  been  promising  yourself  you'd  build! 
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Getting  Started 


Type  "web  hosting"  into  Google  and  you  get  about  800  million 
hits.  So  who  do  you  choose?  You'll  be  able  to  figure  out  once 
you're  through  with  this  chapter!  There  are  two  aspects  to  getting 
your  Web  site  online:  registering  a  domain  name  and  hosting  the 
site  on  a  server.  This  chapter  will  take  you  through  the  various 
aspects  of  domain  registrations  and  hosting  to  help  you  make  an 
informed  decision. 
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GETTING  STARTED 


The  first  step  to  hosting  your  Web  site  is  choosing  your  domain 
name  and  getting  it  registered.  Choosing  the  right  name  depends 
on  a  number  of  factors.  If  you  are  a  business  with  an  already  estab- 
lished presence,  it  would  make  sense  to  use  your  company  name. 
If  you're  promoting  a  particular  product,  it  may  be  a  better  idea  to 
use  that  product's  name.  If  it's  a  personal  Web  site,  you  could  use 
your  own  name...  and  so  on.  Some  of  the  ground  rules  in  choosing 
a  domain  name  are: 


o  It  shouldn't  be  too  long 

o  It  should  be  easy  to  remember 

o  If  should  not  be  easy  to  misspell  the  name 


Like  the  site  name,  the  last  part  of  the  domain  name  -  which 
ends  in  .com,  .net,  .org,  etc.  -  is  also  important.  The  choice  of  what 
domain  extension  to  register  your  site  under  should  also  be  driven 
by  your  target  audience.  Registering  with  a  .com  extension  is  the 
default  consideration.  Most  people  associate  Web  site  addresses 
with  the  .com  extension.  So  even  if  they've  heard  of  your  company 


Go  Daddy  Home  Page 
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in  passing  and  want  to  visit  your  Web  site,  they  would  naturally 
try  yourcompany.com  first.  Of  course,  search  engines  will  help, 
but  this  point  could  be  important  in  the  early  days  of  your  Web 
site  before  you  get  into  the  search  indexes. 

In  addition  to  the  .com  extension,  you  should  also  consider 
registering  the  name  in  country  level  domains.  For  example,  if  you 
are  a  business  based  in  India,  the  .in  extension  will  communicate 
an  intrinsic  message  to  your  web  audience.  It  will  declare  that  you 
are  an  Indian  company  present  in  India,  so  you  are  reachable  by 
phone  or  physical  address  without  too  much  difficulty.  If  your  site 
is  an  e-commerce  site,  it  would  also  give  customers  the  much-need- 
ed assurance  of  the  legality  of  your  site. 

Domain  names  are  valuable.  You  will  need  to  have  at  least  two 
to  three  possible  candidates  for  your  Web  site  name,  as  there  is  a 
good  likelihood  that  most  of  the  obvious  ones  are  already  taken. 

Also,  you  will  need  to  protect  your  domain  name.  Once  your 
site  crosses  a  threshold  of  popularity  you  can  become  easy  targets 
for  me-too  Web  sites  trying  to  ride  on  your  success.  Unscrupulous 
punters  will  attempt  to  lure  your  customers  away  with  underhand 
tactics:  say  you've  registered  your  site  as  mysite.com  and  mysite.in. 
These  scam  artists  will  register  mysite.org  and  mysite.net  and  host 
mock  Web  sites  that  look  exactly  like  yours.  In  many  cases,  cus- 
tomers will  be  tricked  into  parting  with  their  money  with  nothing 
to  show  for  it.  The  ill  will,  though,  will  be  entirely  directed 
towards  you!  Protecting  your  name  by  registering  it  under  as  many 
top-level  and  country-level  domains  as  you  possibly  can  is  neces- 
sary to  protect  your  online  brand. 

Having  decided  on  the  possible  names  for  your  Web  site,  the 
next  step  is  to  find  a  domain  registrar.  Many  hosting  companies 
include  domain  name  registration  as  part  of  their  hosting  pack- 
ages. It  may  seem  simpler  to  use  their  service;  however,  it  could 
become  a  potential  bottleneck  if  you  want  to  switch  hosting  com- 
panies later  on.  The  administrator  account  for  the  domain  regis- 
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tration  will  default  to  the  hosting  company,  and  getting  that  infor- 
mation out  would  be  like  pulling  out  a  tooth.  Since  you  are  dump- 
ing them  and  moving  to  another  host,  they  will  feel  less  than 
obliged  to  provide  you  with  the  necessary  information  in  a  timely 
manner. 

Among  domain  registrars  for  international  domains  such  as 
.com  and  .org,  godaddy.com  provides  some  of  the  best  prices 
you  can  find.  At  around  $7  (about  Rs  350)  per  year,  the  registra- 
tion process  is  completely  transparent  and  under  your  control 
at  all  times. 

The  story  on  .in  domains,  though,  is  murky.  Indian  registrars 
are  known  to  use  sleazy  tactics  like  changing  your  address  to 
theirs  and  then  asking  for  more  money  to  change  it  back.  Be  care- 
ful when  buying  .in  domains.  Take  the  extra  step  of  confirming 
the  terms  with  a  human  contact  before  paying.  Be  specific  and  ask 
for  guarantees  that  you  have  complete  control  over  your  domain 
name.  You  should  have  full  administrator  control  and  you  should 
be  able  to  directly  update  all  details  related  to  your  domain.  If  the 
answers  you  receive  are  evasive,  or  if  they  cite  some  sort  of  techni- 
cal difficulties  or  hide  behind  that  great  excuse  called  "for  securi- 
ty reasons,"  you  can  be  almost  certain  that  you  will  face  a  lot  of 
trouble  when  attempting  to  update/change  your  records. 
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Before  choosing  a  hosting  provider  you  have  to  determine  what 
your  needs  are.  For  a  start-up  Web  site,  this  might  not  be  very 
clear,  but  you  will  have  some  idea  about  the  kind  of  services  you 
plan  to  offer  your  audience.  There  are  a  number  of  elements  you 
need  to  be  clear  about  before  shopping  around  for  a  Web  host. 
These  include  the  type  of  site,  the  kind  of  database(s)  required,  spe- 
cial software  such  as  chat,  bulletin  boards  and  shopping  carts,  the 
average  number  of  visitors  you  expect,  the  number  of  e-mail  users 
who  will  use  your  domain  address,  and  the  server  side  technology 
used  for  your  site. 

Each  of  these  elements  will  determine  your  choice  of  Web  host. 
The  first  choice  you  have  to  make  is  whether  your  Web  site  will  sit 
on  a  shared  server  or  a  dedicated  box.  A  shared  server,  as  the  name 
indicates,  is  a  single  physical  server  that  will  be  hosting  tens  or 
even  hundreds  of  other  Web  sites  alongside  yours.  On  the  other 
hand,  on  a  dedicated  server,  the  entire  machine  is  allocated  to 
your  Web  site.  An  extension  of  the  dedicated  server  is  co-location. 
Unlike  dedicated  servers,  a  co-located  server  is  owned  by  you.  The 
Web  hosting  provider  will  provide  a  pipe  to  the  Internet  and  your 
server  will  be  connected  to  the  Web. 

There  are  advantages  and  disadvantages  with  each  of  these 
options.  Let's  take  a  look  at  each. 

1.2.1  Shared  Hosting 

The  main  attraction  associated  with  shared  hosting  is  cost.  For  a 
fraction  of  the  cost  of  a  complete  server,  you  can  have  a  fully-func- 
tional Web  site  up  and  running  in  no  time.  Most  hosting  providers 
provide  online  setup  and  configuration  of  your  accounts.  This 
should  have  you  ready  to  upload  your  site  files  within  10  minutes 
of  paying  up.  Competition  is  fierce  in  the  shared  hosting  market, 
so  hosting  providers  trip  over  themselves  to  offer  you  a  smorgas- 
bord of  features  hoping  to  attract  you  into  signing  up.  Don't  get 
overawed  by  the  feature  list.  Many  of  these  features  will  have  fine 
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Shared  Web  Hosting 


print  exclusion  clauses  that  may  make  it  unworkable  in  some  con- 
texts. For  example,  your  Web  site  may  be  heavily  dependent  on 
PHP  scripts.  Scripts  are  computing-intensive  tasks  and  may  con- 
sume a  lot  of  processor  resources.  The  provider  may  have  a  policy 
that  limits  hogging  of  the  processor.  Another  example  is  the  band- 
width (the  total  amount  of  data  sent  and  received)  a  site  can  use. 
Be  wary  of  those  who  offer  unlimited  bandwidth.  They  will  pro- 
vide no  guarantees  that  your  site  will  be  accessible  during  peak 
traffic  loads. 

That  said,  shared  hosting  is  the  best  choice  for  a  low-  to  medi- 
um-traffic Web  sites.  Sites  such  as  Yahoo!  Web  Hosting  are  really 
stretching  the  meaning  of  what  is  meant  by  low  traffic,  with  their 
500  GB  of  data  transfer  per  month.  That  gives  you  the  capacity  to 
handle  over  1  million  visitors  a  month.  By  the  time  you  reach  even 
half  that  magic  number,  however,  other  factors  will  prompt  you  to 
get  your  own  server. 

The  real  disappointment  is  the  pathetic  offers  from  Indian 
Web  hosting  companies.  Astronomical  prices  for  less  than  half  the 
features  of  international  hosting  companies,  and  bad  to  indiffer- 
ent customer  support  are  some  of  the  ills  that  plague  this  indus- 
try. While  we'd  love  to  be  patriotic  and  recommend  a  decent 
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Indian  domain  registrar  and  Web  hosting  hero,  the  sad  fact  is  we 
are  yet  to  find  one. 

1.2.2  Dedicated  Server  /  Co-location  server 

Dedicated  servers  give  you  exclusive  use  of  a  single  server  machine 
to  host  your  Web  site.  While  they  are  more  expensive,  dedicated 
servers  might  make  more  sense  if  you  are  hosting  sensitive  data 
and/or  have  high  volume  traffic.  Since  there  are  no  other  Web  sites 
on  your  machine,  you  can  make  full  use  of  the  entire  resources  of 
the  server  without  fear  of  suffering  from  performance  issues.  Of 
course,  beyond  a  certain  load  you  would  need  to  upgrade  your 
server  to  ensure  consistency  in  performance. 

A  dedicated  server,  in  effect,  is  rented  out  from  the  hosting 
provider.  When  shopping  around  for  one,  make  sure  its  specifica- 
tions are  suited  to  your  Web  site's  requirements.  Some  hosts  only 
provide  a  barebones  machine  with  just  the  operating  system  (usu- 
ally Windows  or  Linux).  You  would  need  to  procure  and  install  all 
the  software  and  databases.  Many  have  bundled  offers  where  they 
provide  a  default  set  of  software  that  can  be  hacked  to  suit  your 
requirements.  They  would  include:  chat,  bulletin  boards  and  shop- 
ping card  software,  support  for  VoIP  applications,  support  for 
Flash,  and  so  forth. 

A  co-located  server  on  the  other  hand  is  one  that  you  own  and 
which  is  placed  in  the  data  centre  premises  of  the  hosting  provider. 
You  can  load  any  and  all  software  that  you  require,  and  the  host's 
responsibility  is  to  ensure  that  your  server  remains  constantly  pow- 
ered on  while  providing  you  with  the  agreed-upon  bandwidth. 

Dedicated  server  pricing  can  vary  widely,  and  depends  on  the 
server  configuration,  the  level  of  technical  support  and  other  fac- 
tors, which  differ  from  host  to  host. 

1.2.3  How  to  choose  a  Web  host 

Choosing  a  Web  host  is  one  of  the  most  important  decisions  you 
will  make.  Generally,  the  hosting  provider  should  be  able  to  give 
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you  full  control  over  your  account  (on  a  shared  server)  or  your  serv- 
er. There  should  preferably  be  a  Web-based  administration  inter- 
face that  will  enable  you  to  directly  make  configuration  changes 
to  your  site  without  needing  to  call  technical  support.  You  will 
need  to  invest  time  and  effort  in  choosing  a  host  that  will  be  able 
to  fulfil  if  not  exceed  your  needs. 

Once  you've  determined  the  technical  requirements  of  your 
Web  site,  run  a  search  for  hosting  companies  with  your  core 
requirements.  For  example,  if  your  site  depends  a  lot  on  Flash  ani- 
mation, your  search  term  could  be  "flash  support  web  hosting." 
Narrow  the  selection  down  to  four  or  five  providers  that  fit  with- 
in your  need  and  price  band. 

The  next  step  is  to  search  for  any  adverse  news/comments  on 
these  Web  hosts.  Many  Webmasters  maintain  blogs  detailing  their 
hosting  experiences.  Reviewing  their  feedback  will  help  you  in 
avoiding  sleazy  and  second-rate  hosts.  A  good  tool  to  search  blogs 
is  http://blogsearch.google.com.  Just  include  the  hosting  provider's 
name  in  your  search  terms  to  get  links  to  the  rants  and  raves  of 
your  potential  Web  host! 

One  fact  that  you  need  to  verify  is  the  strength  of  the 
provider's  technical  support.  Most  good  hosting  providers  will 
have  support  personnel  available  24x7  both  via  chat  and  e-mail. 
They  should  specify  SLAs  (Service  Level  Agreements)  on  their 
response  times  and  should  have  sufficient  skills  to  troubleshoot 
any  problem  you  might  have  with  the  server  or  your  account. 
Don't  expect  them  to  troubleshoot  your  Web  site,  though.  If  your 
chosen  host  does  not  provide  detailed  information  about  their 
technical  support  on  their  Web  site,  you'll  need  to  write  them  ask- 
ing them  for  details  such  as  those  about  response  times.  Evasive 
answers,  too  glib  replies  like  "don't  worry,  we'll  handle  it"  are 
warning  flags. 

Also,  it  is  a  good  idea  to  maintain  complete  and  up-to-date 
offline  backups  of  all  the  data  and  content  on  your  Web  site.  This 
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will  enable  you  to  quickly  switch  hosts  if  you  find  your  current 
host  unsatisfactory.  All  you  need  to  do  is  set  up  the  new  site, 
change  the  DNS  pointers  in  your  domain  name,  wait  for  a  few  days 
for  the  propagation  (of  the  new  IP  address  for  your  Web  site)  to 
take  effect,  and  you'll  be  good  to  go. 


1.3  Free  Domains  /  Web  sites 


Geocities  Control  Panel 
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For  those  of  you  still  undecided 
about  spending  money  on  setting 
up  your  own  Web  site,  there  is 
still  the  option  of  going  in  for  a 
free  site.  Free  sites  have  some  lim- 
itations. Your  site  will  be  a  sub- 
domain  of  the  free  site  provider. 
Geocities  (geocities.yahoo.com) 
and  Google  Page  Creator 
(pages.google.com)  are  good 
examples  of  free  Web  site 
providers.  Other  than  the  "top- 
drawer"  names,  there  are  literally 
hundreds  of  companies  that  pro- 
vide free  hosting.  The  catch, 
though,  is  that  they  will  reserve 
space  on  your  screen  to  serve 
advertising  banner  ads  and  other 
links.  Also,  they  might  disable 
certain  features  that  are  processor  intensive,  and  only  allow  you  to 
have  limited  interactivity  on  the  site. 


Google  Page  Creator 


If  you  are  new  to  Web  page  design  and  not  too  keen  on  getting 
your  fingers  dirty  by  delving  into  HTML  coding,  most  of  these  free 
Web  sites  (as  also  the  paid  sites)  offer  template-based  WYSIWIG 
(What  you  see  is  what  you  get)  interfaces  that  enable  you  to  design 
your  Web  site  using  nothing  more  than  your  mouse  and  keyboard. 


16 


SEE  FAST  TRACK 


WEB  DESIGN 


GETTING  STARTED 


You  can  choose  from  themes  and  colour  combinations  that  can 
give  you  a  frilly-functional  (even  if  with  limited  capabilities)  Web 
site  in  an  hour  or  so. 

1.4  Ready-Made  Web  Sites 


As  the  Internet  evolves  into  a  vehicle  for  social  interaction,  main- 
taining online  journals  or  blogs  is  getting  increasingly  popular. 
Blogs  are  evolving  into  alternative  sources  of  information  that 
bypass  mainstream  media  to  engage  directly  with  the  audience. 
Many  bloggers  have  acquired  personal  fan  followings  that  can 
rival  those  of  cine  stars! 


1.4.1  Blogs 

The  ease  of  personal  publishing 
that  blog  and  analogous  sites 
offer  makes  it  irresistible  to 
many.  As  with  Web  sites,  there  are 
two  options  you  can  go  with:  get  a 
paid  blogging  site  or  go  for  a  free 
one.  Blogging  software  come  in 
many  shades  and  flavours;  two  of 
the  most  popular  ones  are 
Movable  Type  and  WordPress. 
While  WordPress  is  free  and  open 

source,  you  will  have  to  buy  a  license  to  use  Movable  Type.  Both 
these  software  have  their  relative  merits,  but  the  bottomline  is 
that  you  can  host  them  on  your  own  server  customised  to  suit  your 
requirements. 


^WordPress 

WordPress  Home  Page 


Free  blogging  sites  such  as 
blogger.com  and  rediffblogs.com 
remove  the  technical  hurdles  and 
allow  you  to  start  blogging  right 
away  after  a  simple  sign-up 
process.  You  can  change  the  look 


uSWSsjs  

Rediff  Blogs  Home  Page 

SEE  FAST  TRACK 
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and  feel  of  your  blog  to  suit  your  style  and  personality,  and  add 
advertising  banners  and  affiliate  links  that  can  provide  some  addi- 
tional revenue. 

Of  course,  advertising  is  also  possible  on  paid  blog  sites.  The 
only  difference  between  hosting  your  own  blog  and  using  a  free 
host  is  the  level  of  control  you  have  over  the  look  and  feel  and  pres- 
entation style. 

1.4.2  Photo  Blogs 

Photo  bloggers  are  the  next  step 
in  the  blogging  evolution.  With 
the  ubiquity  of  the  digital  camera 
and  camera  phones,  taking  pic- 
tures has  almost  become  a  reflex 
action.  Sites  such  as  Flickr.com 
and  Photobucket.com  allow  you 
to  host  your  images  for  free  with 
basic  features,  and  for  a  fee  with 
advanced  features.  You  can  make 
your  pictures  public,  keep  them  private,  or  share  them  with  select 
friends. 

1.4.3  Personal  Portals 

What  happens  when  you  mash  up 
content  blogs  with  photo  blogs? 
You  get  sites  such  as  Yahoo  360o 
(360.yahoo.com),  My  Space 
(myspace.com)  and  Multiply  (mul- 
tiply.com).  The  premise  of  these 
sites  is  that  it  is  no  longer  just 
about  text  or  photos.  The  digital 
persona  should  encompass  every 
aspect  of  a  person's  social  life, 
enabling  them  to  publish  blogs,  photos,  videos,  music  and  more, 
while  at  the  same  time  connecting  them  with  friends  and  peers 
via  a  seamless  interface. 


Flickr  Home  Page 


OX  mULTIPLV 

One 

Sits  Fai  Everything  (Stop  1  ul  Si 

w. 

m  ir?  I 

Multiply  ■  One  Site  for  Everything 
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Hypertext  Markup  Language  or  HTML  is  the  basis  for  all  Web 
pages.  For  those  of  you  who  want  more  control  over  the  layout 
and  design  of  your  Web  pages,  HTML  is  the  way  to  go.  Compared  to 
regular  programming  languages,  HTML  is  fairly  easy  to  learn  and 
simple  to  use. 
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While  you  can  use  HTML  code  editors  and  WYSIWYG  editors  to 
built  your  HTML  pages,  it  is  recommended  that  you  start  off  with 
hand  coding  to  get  an  in-depth  understanding  of  the  way  HTML 
works.  Once  you're  fairly  confident  of  your  HTML  skills,  you  can 
then  go  ahead  to  use  advanced  editing  tools.  HTML  only  requires  a 
simple  text  editor  to  start  coding.  Do  take  the  time  to  work 
through  the  sample  code  included  in  this  section  to  get  a  hands- 
on  feel  on  working  with  HTML. 

2.1  Basic  Formatting  Using  HTML 


An  HTML  file  contains  "markup  tags"  that  tell  the  Web  browser 
how  to  follow  the  instructions  enclosed  within  the  tags.  The  angu- 
lar brackets  "<"  and  ">"  indicate  that  the  text  within  the  brackets 
is  a  tag.  The  start  of  the  tag  and  the  end  of  the  tag  are  identified 
using  special  formats.  For  example,  <p>  indicates  the  start  of  a 
new  paragraph,  and  </p>  indicates  the  end  of  the  paragraph. 
Regular  text,  or  other  instructions  depending  on  the  tag  type,  is 
enclosed  between  the  starting  and  ending  tags.  Tags  are  not  case 
sensitive,  that  is,  <p>  and  <P>  mean  the  same  thing. 

Each  tag  can  have  attributes.  These  provide  additional  format- 
ting and  other  information  regarding  the  tag.  For  example,  the 
<body>  tag  can  have  an  attribute  to  specify  the  background  colour 
of  the  Web  page.  <body  bgcolor="blue">  will  render  the  Web  page 
with  a  blue  background. 

Every  HTML  document  starts  with  the  <html>  tag  indicating  to 
the  Web  browser  the  start  of  the  HTML  document,  and  ends  with 
the  </html>  tag,  which  indicates  the  end  of  the  document.  A  basic 
HTML  document  looks  like  this: 

<html> 
<head> 

<title>My  first  HTML  page</title> 
</head> 
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<body> 

This  is  my  first  homepage.    <b>This  text  is 
bold</b> 
< /body> 
</html> 

~~ ~-    :■  ■  &    ^  ©  G 

Hi^ is rcfrr5rsth-jm^a£*  Tius  feaii  held 

The  first  HTML  Page 


The  <head>  tags  indicate  header  information,  or  information 
that  is  not  displayed  in  your  page.  The  <title>  tags  enclose  the  text 
that  will  appear  in  the  caption  bar  of  your  Web  browser.  The  text 
between  the  <body>  tags  will  be  displayed  in  your  browser  win- 
dow. <b>  and  </b>  indicate  to  the  Web  browser  that  all  text 
between  this  tag  pair  should  be  bold.  To  see  the  above  code  action, 
type  it  out  in  a  text  editor  like  Notepad  and  save  it  as  a  .html  or 
.htm  file.  Then  open  the  file  in  your  browser  to  see  the  results. 

Other  than  the  above,  other  basic  tags  are  headings,  para- 
graphs, line  breaks,  links,  emphasis  and  lists. 

There  are  six  levels  of  headings  in  HTML.  They  start  with  the 
<hl>  </hl>  tag  pair  and  go  up  to  the  <h6>  </h6>  pair.  You  should 
use  <hl>  </hl>  for  the  most  important  heading  in  your  site,  and 
<h2>  </h2>  for  a  sub-head,  and  so  on.  For  example: 

<hl>Important  heading</hl> 
<h2>Less  important  heading</h2> 

Mf  flnst  HTM  pRQf]  LJ  My  *it  HTML  pags 

Tijj  :f  :(r:  fti:t  ivjttit-.i       Tlus  U:Tt  i?  holfi 

Impui  t;iut  heading 

1  ftt  imivirtanl'  hiyaflinci  

Headings  and  their  weights 
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and  so  on. 

The  <p>  and  </p>  tags  enable  you  to  specify  the  paragraph 
breaks  in  your  text.  You  can  use  as  many  of  these  tags  as  you 
need. 

<p>  Paragraph  one  </p> 
<p>  Paragraph  two  </p> 

"Jus  is  snv  bj  si  :i>iE£psg=  This  irsil  iy  bulri 

Important  heading 

Less  iinpurtuuE  heading 

Paragraphs 

The  <br>  and  </br>  tags  introduce  line  breaks  when  you  want 
to  start  a  new  line  and  not  a  new  paragraph.  Thus, 

<p>Para  three  broken  into<br>two 
lines</brx/p> 

will  print  the  text  in  two  lines. 

TT*s  is  njy  cirsljionmpagt  TJiis  Icxliy  LulJ 

Important  heading 

Less  important  heading 

ParagrapJi  two 

Par  a  tjire  r  trc^m  into 

Breaking  paragraphs  into  lines 
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The  <em>  tag  adds  emphasis  to  words. 

We  need  to  <em>emphasise</em>this . 

Important  heading 

Less  important  heading 

Psr*eraph  PJie 
Paragraph  1wa 

Pan  (hrec  brekm  into 
ntc  Ikce 

Putting  emphasis  on  certain  words 


To  link  to  a  different  site  or  page  you  use  the  <a>  tag.  If  you 
have  a  file  called  digit.html  in  a  folder  called  'Digit'  and  you  want 
to  link  to  this  from  your  home  page,  the  resulting  code  would  look 
like  this: 


<a  href = "Digit/digit . html" >Digit  Page</a> 


This  code  will  display  the  text  "Digit  Page",  usually  in  a  blue 
font,  and  underlined  to  indicate  a  link.  To  specify  a  link  to  anoth- 
er Web  site  you  substitute  the  file  name  with  the  site's  URL. 

<a  href ="http : / /www. thinkdigit . com/" >Digit 
Home  Page</a> 


HTML  supports 
three  kinds  of  lists.  A 
bulleted  or 
unordered  list  uses 
the  <ul>  and  <li> 
tags.  A  numbered  or 
ordered  list  uses  the 
<ol>  and  <li>  tags. 
And  a  definition  list 


I-ess  important  heading 

Paragraph  tw 

7  .lit  lb  e*  ledum  wta 
tan  ]mcs 

Creating  Hyperlinks 
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lists  terms  and  their  definitions  by  using  the  <dl>,  <dt>  and  <dd> 
tags. 

A  bulleted  list: 

<ul> 

<li>list  item  one</li> 

<li>list  item  two</li> 

<li>  list  item  three</li> 
</ul> 

A  numbered  list: 
<ol> 

<li>list  item  l</li> 
<li>list  item  2</li> 


<li>list  item  3</li> 
</ol> 


A  definition  list: 

<dl> 

<dt>term  one</dt> 

<dd>def inition  for  term 

one</dd> 

<dt>term  two</dt> 

<dd>def inition  for  term 

two</dd> 

<dt>term  three  </dt> 

<dd>def inition  for  term 

three< / dd> 

</dl> 
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|§?         ££■  ^  □  |/J  f*f=://A:^;-^MI.J-r  .=t 

ThiEJE  or? first horfiepB^e.  This  test  k  bnlcl 

•  Jilt  iler.'i  Oiffl 

*  luttteQitwi: 

•  Jilt  itctlLtk-et 

1.  Jirtttrnn  I 

2.  Jiititaso.2 

ckfinilwD  for  term  «it 

ttlULI  tWC 

^finitorj  for  term  lw? 

drfiniti<>n  ft*  term  drat 

The  Bulleted,  Ordered  and  Definition  lists 


All  these  tags  can  be  combined  and  nested  and  used  in  power- 
ful ways  to  make  a  richly-formatted  document.  Other  tags  enable 
you  to  manipulate  the  layout  and  design  of  the  Web  page  to  a 
great  extent. 

Also,  if  you  wish  to  insert  developer  comments  into  your  Web 
pages,  you  would  use  the  comment  tag: 

<!-  Insert  comment  here  -> 
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To  add  an  image  to  your  Web  page,  you  use  the  <img>  tag  and  spec- 
ify a  location  to  pick  up  the  image  file  from. 

<img  src="images/image . jpg"  width="200" 
height="150"   alt="Just  an  image"> 

The  'src'  (source)  attribute  tells  the  browser  to  get  the  image 
file  image.jpg  from  the  'images'  folder  for  the  Web  site,  and  that 
it  should  be  displayed  in  a  200  x  150  pixel  area.  While  the  image  is 
being  loaded,  the  "alt"  (alternate)  attribute  informs  the  browser  to 
display  the  text  "Just  an  image". 

You  can  also  make  a  clickable  link: 

<a  href ="/" ximg  src= "logo . gif "  alt="home 
page" >< / a> 

This  tells  the  Web  browser  that  the  image  file  "logo.gif  is 
clickable,  and  any  click  on  the  logo  image  should  be  directed  to 
the  home  page  (the  "/"  symbol). 

*  ■:■  ■  S  j  Q  3  | _  file^::iT=:A'Tf%3TJC™meri(ts/^/Ar 
Ths  ss  lay  first  homepage.  This  text  is  bold 


My  BieDd  H  sash 


L  I 

ALT  text  in  images 

26    HM3  FAST  TRACK 


WEB  DESIGN 


HTML 


2.3  Tables 


Tables  are  defined  using  the  <table>  tag.  Rows  are  defined  with 
the  <tr>  tag  and  each  column  is  divided  into  data  cells  with  the 
<td>  tag.  Headings  in  a  table  are  defined  using  the  <th>  tag.  While 
you  may  specify  a  table  without  any  borders,  depending  on  your 
layout  requirements,  you  can  use  the  border  attribute  to  specify 
the  thickness  of  the  border. 


<table  border="l"> 

<tr> 

<th>Heading 

l</th> 

<th>Heading 

2</th> 

</tr> 

<tr> 

<td>row  1, 

cell  l</td> 

<td>row  1, 

cell  2</td> 

</tr> 

<tr> 

<td>row  2, 

cell  l</td> 

<td>row  2, 

cell  2</td> 

</tr> 

</table> 
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Once  your  Web  site  grows  beyond  a  few  pages,  you  will  want  to 
maintain  a  consistent  look  and  feel  across  all  pages  with  consis- 
tent formatting,  design  and  layout.  The  trouble  starts  when  you 
have  to  change  one  single  element  in  your  format  and  want  it 
replicated  across  all  your  Web  pages.  Updating  each  page  manual- 
ly can  get  tedious  if  you  have  20-odd  pages,  and  a  Herculean  task 
if  you  have  100  pages  or  more. 

Cascading  Style  Sheets  or  CSS  enable  you  to  separate  the  con- 
tent of  your  HTML  documents  from  the  presentation.  A  single  file 
or  a  small  group  of  files  could  define  the  presentation  format  for 
your  entire  Web  site.  Thus,  any  format  or  presentation  changes 
required  across  the  Web  site  would  be  controlled  through  these 
CSS  files. 

For  style  sheets  to  work,  it  is  important  that  your  HTML  is 
error-free.  You  can  use  the  HTML  Tidy  tool  (http://tidy.source- 
forge.net)  to  automatically  fix  errors  as  well  as  tidy  up  the  markup 
for  easier  reading  and  editing. 

2.4.1  The  Basics 

To  define  styles,  you  use  the  <style>  element.  To  define  properties 
for  the  documents,  you  specify  the  attributes  for  the  document 
tags  within  the  <style>.  When  defining  the  style  for  a  template 
HTML  file,  the  style  element  is  placed  within  the  document 
<head>  and  not  the  <body>. 

<html> 

<head> 

<title>  Document  Title  </title> 
<style  type="text/css" > 

body  {   color:   black;   background:   white;  } 
</ style> 
</head> 
<body> 
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Document  Content  comes  here 

< /body> 
</html> 

Between  <style>  and  </style>,  a  special  notation  for  style  rules 
is  used.  Each  document  tag  name  is  defined  and  a  list  of  style  prop- 
erties for  each  is  specified  between  the  curly  braces.  In  this  exam- 
ple, the  <body>  tag  has  been  given  the  property  of  a  white  back- 
ground with  black  text.  Defining  the  style  of  the  <body>  tag  sets 
the  basis  for  the  rest  of  the  style  definitions. 

The  definition  format  for  the  style  property  is  stylepropertyl : 
value;  styleproperty2:  value;  and  so  on.  Note  the  use  of  colons  and 
semi-colons  to  separate  one  property  from  the  next. 

2.4.2  Using  A  Separate  Style  Sheet 

To  use  the  same  style  for  several  different  Web  pages,  you  should 
create  a  separate  style  sheet  and  then  link  the  sheet  from  each 
page  where  you  want  the  style  to  be  applied. 

<html> 
<head> 

<title>  Document  Title  </title> 
<link         type= "text/ess"  rel= "stylesheet" 

href ="style . ess" > 
< /head> 
<body> 

Document  content  comes  here 

< /body> 
</HTML> 

As  you  can  see  from  the  code,  the  file  "style.css"  is  referred  to 
in  the  document  <head>  with  the  "rel"  attribute  set  to 
"stylesheet",  and  the  type  attribute  set  to  "text/ess".  This  tells  the 
browser  to  use  the  file  "style.css"  to  apply  the  style  format  to  the 
current  document. 
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Not  only  can  you  refer  to  an  external  style  sheet,  you  can  also 
specify  additional  page-specific  style  elements  in  the  same  HTML 
file.  Below  you  will  see  an  example  of  an  alternate  style  sheet 
coded  into  a  Web  page: 


/*   style. ess- 

-a  simple  style  sheet  */ 

body  { 

margin- left : 

15%;   margin- right :  15%; 

color:  blue 

} 

background:  white; 

This  tells  the  browser  that  this  page  has  a  margin  on  the  left 
and  right  that  totals  15  per  cent  of  the  page  width,  has  a  text 
colour  of  'blue'  on  a  'white'  background. 


Tii;  simt  Srsri'iiiitjjje,  This  tcitfir  bald 


Heading  ! 

WW  1,  cdl2 

kon  2.  rttt  ]  [row  2,  ceD  2 

A  CSS  formatted  page 


2.4.3  Fine-grained  Control  Of  Your  Formatting 

There  are  a  number  of  style  properties  that  can  be  used  to  estab- 
lish fine-grained  control  over  your  formatting.  The  "margin-top" 
and  "margin-bottom"  properties  specify  the  margin  space  above 
and  below  the  document.  For  example,  you  can  use  these  in  con- 
junction with  the  headings  property  to  control  the  space  above 
and  below  each  heading. 
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hi   {  margin-top:    3em;   margin-bottom:    2em;  } 

The  "em"  unit  is  relative  to  the  size  of  the  font.  One  em  equals 
the  height  of  the  font.  In  this  example,  all  hi  headings  will  have  a 
top  margin  three  times  the  height  of  hi  and  a  bottom  margin 
twice  the  height  of  hi. 

Style  sheets  make  it  particularly  easy  to  control  font  size  and 
styles.  While  you  cannot  control  the  fonts  available  in  all  the 
browsers  that  view  your  pages,  you  can  set  a  preferred  order  for 
several  fonts. 


body  { 

f ont- family : 

Verdana,    sans-serif;  } 

hl,h2 

font-family 

Garamond,    "Times  New 

Roman" , 

serif;  } 

In  the  above  example,  Garamond  is  preferred  for  important 
headings,  failing  which  it  will  use  'Times  New  Roman',  and  if  that 
is  unavailable,  it  will  default  to  the  available  serif  font.  Verdana 
would  be  used  for  paragraph  texts,  and  if  that  is  unavailable,  it 
will  use  the  default  sans-serif  font. 


Similarly,  you  can  set  style  properties  for  borders,  margins  and 
colour.  For  an  in-depth  tutorial  on  using  CSS,  visit  www.yourhtml- 
source.com/stylesheets/. 

When  using  style  sheets  (and  general  HTML)  you  should 
remember  that  not  all  browsers  respond  in  a  similar  manner. 
Hence,  what  may  be  rendered  exactly  as  you  wish  in  one  browser 
may  get  totally  skewered  in  another.  This,  of  course,  means  that 
you  will  need  to  test  and  retest  each  of  the  changes  in  as  many 
browsers  as  possible.  While  that  may  be  practically  impossible,  you 
should  at  the  minimum  test  your  pages  in  Internet  Explorer, 
Firefox  and  Opera,  as  these  are  the  most  popular  browsers,  and  99 
per  cent  of  visitors  will  be  using  one  of  these. 
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2.5     A  List  Of  HTML  Tags 


Tag  Description 

<!--...-->  Specify  comments  within  your 

code 

<!DOCTYPE>  Specifies  the  document  type 

<a>  Specifies  an  anchor 

<abbr>  Specifies  an  abbreviation 

<acronym>  Specifies  an  acronym 

<address>  Specifies  an  address  element 

<applet>  Used  to  indicate  an  applet 

<area>  Specifies  an  area  inside  an 

image  map 
<b>  Specifies  bold  text 

<base>  Specifies  a  base  URL  for  all 

the  links  in  a  page 
<basefont>  Specifies  a  base  font 

<bdo>  Indicates  the  direction  of 

text  display 
<big>  Specifies  big  text 

<blockquote>  Specifies  a  long  quotation 
<body>  Specifies  the  body  element 

<br>  Inserts  a  single  line  break 

<button>  Specifies  a  push  button 

<caption>  Specifies  a  table  caption 

<center>  Specifies  text  centring 

<cite>  Specifies  a  citation 

<code>  Specifies  computer  code  text 

<col>  Specifies  attributes  for 

table  columns 
<colgroup>  Specifies  groups  of  table 

columns 

<dd>  Specifies  a  definition 

description 
<del>  Specifies  deleted  text 

<dir>  Specifies  a  directory  list 
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<div> 

Speci  f  ies 

a  sect  ion  in  a  docu 

ment 

<df  n> 

Speci  f ies 

a  definition  term 

<dl> 

Speci  f ies 

a  definition  list 

<dt> 

Speci  f  ies 

a  definition  term 

<em> 

Speci  f ies 

emphasized  text 

<f ieldset  > 

Speci  f ies 

a  fieldset 

<  f ont > 

Speci  f  ies 

text  font,    size,  and 

color 

<  f  orm> 

Specifies 

a  form 

<  frame  > 

Speci  f  ies 

a  sub  window  (a 

f  irame ) 

<  frameset  > 

Speci  f  ies 

a  set  of  frames 

<hl>  to  <h6> 

Speci  f  ies 

header  1  to  header  6 

<head> 

Specifies 

information  about  the 

document 

<hr  > 

Speci  f ies 

a  horizontal  rule 

<html > 

Speci  f ies 

an  HTML  document 

<  i  > 

Speci  f  ies 

italic  text 

<if rame> 

Speci  f ies 

an  inline  sub  window 

{ f rame ) 

<  img> 

Speci  f  ies 

an  image 

<  input  > 

Speci  f  ies 

an  input  field 

<  ins  > 

Speci  f  ies 

inserted  text 

<isindex> 

Specifies 

a  single- line  input 

field 

<kbd> 

Specifies 

keyboard  text 

<label> 

Specifies 

a  label  for  a  form 

control 

<legend> 

Speci  f ies 

a  title  in  a  fieldset 

<li> 

Specifies 

a  list  item 

<  1  ink> 

Speci  f  ies 

a  resource  reference 

<map> 

Specifies 

an  image  map 

<menu> 

Specifies 

a  menu  list 

<meta> 

Specifies 

met a  information 

<nof rames> 

Specifies 

a  no frame  section 

<noscript> 

Specifies 

a  noscript  section 
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<obj  ect > 

Specifies 

an  embedded  ob j  ect 

<ol  > 

Specifies 

an  ordered  list 

<optgroup> 

Specifies 

an  option  group 

<opt  ion> 

Specifies 

an  option  in  a  drop- 

down  list 

<p> 

Specifies 

a  paragraph 

<param> 

Specifies 

a  parameter  for  an 

ob j  ect 

<pre  > 

Specifies 

preformatted  text 

<q> 

Specifies 

a  short  quotation 

<  s  > 

Spec  i  f  ies 

strike through  text 

<  samp  > 

Spec  i  f  ies 

sample  computer  code 

<script > 

Specifies 

a  script 

<select > 

Specifies 

a  selectable  list 

<  small > 

Specifies 

small  text 

<  span> 

Spec  i  f  ies 

a      section      in  a 

document 

<  strike  > 

Spec  i  f  ies 

strike through  text 

<  strong> 

Specifies 

strong  text 

<  style  > 

Specifies 

a  style  definition 

<  sub> 

Spec  i  f  ies 

subscripted  text 

<  sup> 

Spec  i  f  ies 

superscripted  text 

<  table  > 

Spec  i  f  ies 

a  table 

<  tbody > 

Spec  i  f  ies 

a  table  body 

<td> 

Spec  i  f  ies 

a  table  cell 

< textarea> 

Specifies 

a  text  area 

< tf oot > 

Specifies 

a  table  footer 

<th> 

Spec  i  f  ies 

a  table  header 

< thead> 

Specifies 

a  table  header 

<title> 

Specifies 

the  document  title 

<  t  JT> 

Spec  i f  ies 

a  table  row 

<tt> 

Specifies 

teletype  text 

<U> 

Specifies 

underlined  text 

<ul> 

Specifies 

an  unordered  list 

<var> 

Specifies 

a  variable 

<xmp> 

Specifies 

preformatted  text 

SMI  FAST  TRACK 


WEB  DESIGN 


This  list  and  the  contents  of  this  chapter  should  help  you 
breeze  through  the  chapters  that  follow,  and  not  get  lost  with  any 
code  terminology  you  encounter.  You  should  take  the  time  to  try 
out  all  the  code  mentioned  in  this  chapter  to  get  used  to  HTML 
before  you  go  any  further  in  this  book.  Just  open  Notepad,  type  out 
the  code  mentioned  here,  save  the  file  on  your  Desktop  as 
file.html  and  then  double-click  the  file  to  see  the  results  in  a 
browser.  It's  important  that  you  do  this  so  as  to  get  used  to  typing 
out  code,  making  sure  to  close  every  tag  you  open  (<a>  needs  an 
</a>  of  everything  after  <a>  becomes  a  link,  etc.)  and  also  get  used 
to  debugging  the  flaws  in  code  that  you  or  an  HTML  editor  creates. 
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The  Basics  Of  JavaScript 


Most  people  who  learn  HTML  to  use  on  their  Web  sites  aren't 
programmers  by  nature  or  profession,  but  it  would  be  unfair 
to  not  let  them  have  the  same  interactivity  in  their  Web  pages  as 
any  desktop  application.  JavaScript  is  a  scripting  language— a 
"diet"  programming  language— designed  to  be  easy  to  learn  and 
use  even  for  novices,  and  by  the  end  of  this  chapter,  you'll  be  able 
to  write  basic  JavaScript  code  even  if  you've  never  written  a 
program  before. 
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3.1  The  Ground  Up 


Before  we  begin,  there  are  a  few  things  that  need  dealing  with. 
Most  importantly,  you  should  read  the  previous  chapter  on  HTML— 
you'll  need  all  that  knowledge  to  know  what's  happening  inside 
your  JavaScript  code  blocks.  Next,  we  deal  with  some  basic  pro- 
gramming concepts. 


How  JavaScript  works 

JavaScript  is  an  Interpreted 
Language— your  browser  reads 
each  instruction  and  processes 
it  in  realtime,  as  opposed  to 
compiled  languages  such  as  C 
and  C++,  where  all  the  code  you 
write  needs  to  be  translated 
into  a  language  that  your  hard- 
ware can  understand  (called 
machine  language)  before  it 
can  be  executed. 

Variables 

Variables  store  any  information 
that  you  want  to  use  in  your 
programs.  As  the  name  sug- 
gests, you  can  change  their 
value  at  any  time.  All  variables 
need  a  declaration— you  have  to 
tell  the  interpreter  what  to  treat 
as  a  variable.  Let's  take  a  simple 

example— a  program  that  adds   

two  numbers.  Note  that  this  is 

not  actual  code,  but  a  representation  of  what  it'll  be  doing. 


avaScript  and  Jav 


A  near-foolproof  way  to  get 
programmers  to  blow  their 
gaskets  is  to  draw  no  distinc- 
tion between  JavaScript  and 
Java.  Despite  sharing  four  let- 
ters of  the  name,  the  two  lan- 
guages have  very  little  in  com- 
mon! Java  is  a  much  more  pow- 
erful and  complex  language 
than  JavaScript,  for  one.  It 
belongs  to  the  same  category 
of  languages  as  C++  and  C,  lan- 
guages we  are  most  likely  to 
see  desktop  and  server  appli- 
cations written  in.  JavaScript, 
however,  is  a  language  meant 
only  to  introduce  an  element  of 
programming  to  Web  pages, 
nothing  more. 


The  Declarations 
A  is  a  variable 
B  is  a  variable 
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Assigning  values 

A=5 

B=7 

Performing  Operations 
Print  A+B 

.Result 

12 

Assigning  New  Values 

A=ll 

B=14 

Performing  Operations 
Print  A+B 

.Result 
25 

...and  so  on.  This  way,  you  don't  have  to  write  different  pro- 
grams to  add  different  sets  of  numbers. 

Functions 

Functions  are  blocks  of  code  that,  once  written,  can  be  reused  as 
many  times  as  desired  within  a  program.  If  you  wanted  to  club  the 
"Add  and  Print"  functionality  we  just  saw  in  the  previous  example, 
you  could  write  a  function  called  AddAndPrint  thus  (again,  this  is 
not  real  code): 

The  Declarations 

Function  AddAndPrint (A,  B) 

(A  and  B  are  called  Arguments— variables  that 
the  function  will  either  manipulate  or  use  when 
it  is  executing) 

What   the  function  will  do 
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Print  A+B 

Using  the  function 
AddAndPrint (A,  B) 
AddAndPrint (B,  C) 

...and  so  on.  It  might  seem  trivial  now,  but  for  more  complex 
operations  like  calculating  taxes,  you'd  much  rather  call  a  function 
once  than  write  a  hundred  lines  of  code  every  time  you  need  it. 

Objects  in  Programming 

In  programs,  objects  represent  physical  entities,  complete  with 
their  attributes  and  behaviours.  A  dog,  for  example,  has  a  tail— one 
of  its  attributes;  it  also  barks— one  of  its  behaviours.  If  you  were  to 
get  your  JavaScript  dog  to  bark,  it  would  look  something  like  this: 

Dog .bark ( )  ; 

The  objects  you  will  encounter  when  writing  JavaScript  code 
will  include  the  browser  window— you  can  use  the  command 
"window.open()"  to  open  a  new  window;  there  will  also  be  the  cur- 
rent document— you  can  use  the  command  "document.write("My 
Text")"  to  write  text  onto  your  web  page.  Everything  else  is  also  an 
object— be  it  text  boxes,  images,  even  your  mouse  cursor. 

3.2  Baby's  First  JavaScript 


Here's  what  JavaScript  looks  like.  This  is  a  simple  block  of  code 
that  will  write  the  text  "Digit"  onto  your  web  page,  once  in  normal 
formatting,  and  once  in  bold  and  italics. 

< script  type  =  " text/ j avascript" > 
var  name  =  "Digit" 
document . wr  i  t  e ( name ) 

document  .write  ("<bxi>"  +name+" </ix/b>") 
</script> 
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JavaScript  code  is  always  enclosed  in  the  <script>  tags  inside 
your  HTML  document.  You  can  insert  code  blocks  anywhere  in  the 
document,  but  it's  always  good  practice  to  enclose  your  scripts 
within  the  <head>  tags  of  the  HTML.  This  way,  the  script  will 
always  be  loaded  before  it  gets  used  within  the  page. 

As  you  can  see,  you  can  declare  a  variable  and  assign  it  a  value 
immediately.  We  then  used  the  "write"  function  of  the  "docu- 
ment" object  to  output  text  onto  the  page. 

If  you  want  to  output  two  strings  of  text  together  (called  con- 
catenation), you  can  use  "+".  The  result  of  our  second  "docu- 
ment.write"  statement  will  read  "<b><i>Digit</i></b>"  (without 
the  quotes).  Obviously,  when  your  browser  sees  this  text,  it  will 
interpret  it  as  the  HTML  it  is,  and  show  you  the  word  "Digit"  in 
bold  and  italics. 

If  you've  ever  seen  or  written  code  in  C  or  C++,  you  might 
notice  that  there  are  no  semicolons  at  the  end  of  each  line. 
However,  if  you  look  at  some  of  the  code  on  the  Web,  you  will  see 
lines  terminated  by  semicolons.  They  are  purely  optional,  and  are 
there  so  that  C  programmers  don't  suddenly  feel  out  of  their  ele- 
ment when  writing  JavaScript. 

Comments 

If  you're  writing  large  scripts,  it's  helpful  to  use  comments  to  note 
down  what  you're  doing,  so  that  anyone  reading  the  code  can 
understand  what's  going  on— yourself  included. 


//this  is  how  you 

write  single  line  comments 

/* 

And  this... 

...is  how  you  write 

multi-line  comments 

*/ 
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Protecting  your  code  from  prying  eyes 

If  you  write  JavaScript  code  within  your  Web  page  itself,  anyone 
can  see  what  you've  done  just  by  right-clicking  on  the  page  and 
selecting  "View  Source"  (the  actual  command  changes  from 
browser  to  browser). 

If  you  don't  want  visitors  seeing  the  code  you've  written,  you 
can  write  it  in  an  external  file,  and  point  your  Web  page  to  that 
file  from  within  the  <script>  tags.  Let's  assume  we're  writing 
JavaScript  for  www.samplesite.com.  This  is  how  you  would  include 
an  external  JavaScript  file: 

<html> 
<head> 

< script     src=" /scripts/ sample . js" 
type="text/ javascript" ></ script> 
< /head> 

<body> 

< /body> 
</html> 

"sample.js"  is  the  file  that  contains  all  your  JavaScript  code. 
Notice  that  the  path  to  it  is  an  http  path  with  forward  slashes.  The 
full  path  to  it  will  be  www.samplesite.com/scripts/sample.js.  To 
prevent  visitors  to  your  site  getting  their  hands  on  this  file,  just 
disable  read  access  on  the  "scripts"  folder  when  you  upload  the 
site— more  on  this  in  Chapter  10. 

Declaring  Variables 

Variables  in  JavaScript  can  be  declared  by  using  the  "var"  state- 
ment thus: 

var  a 
OR 
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var  a  =  25 

You  can  declare  variables  without  using  the  "var"  statement: 
a  =  25 

Note  that  variable  names  are  case-sensitive,  so  "A"  is  not  the 
same  as  "a".  Variable  names  cannot  begin  with  numerals— the  first 
character  must  be  a  letter  or  an  underscore. 

3.3  Conditions  In  JavaScript 


You  can  execute  different  blocks  of  code  depending  on  condi- 
tions—for example,  based  on  which  brower  your  visitor  is  using. 
Here's  a  list  of  statements  you  can  use,  and  what  they  really  mean: 

The  "if  statement 

"If  a  condition  is  true,  execute  this  code." 

The  "if...else"  statement 

"If  a  condition  is  true,  execute  this  code,  otherwise  execute 
that  code." 

The  "if...else  if  statement: 

"If  a  condition  is  true,  execute  this  code,  otherwise  check  if 
this  other  condition  is  true." 

The  "switch"  statement: 

"Check  through  all  these  conditions  and  execute  the  appropri- 
ate block  of  code." 

To  illustrate,  we'll  check  which  browser  your  visitor  is  using,  and 
display  a  different  message  for  each  browser. 

Example:  The  "if  statement 

< script  type=" text/ j avascript" > 
//get  the  browser's  name 
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var  browser  =  navigator . appName 

if  (browser=  =  "Opera"  ) 

{ 

//let's  pop  open  an  Alert  box 
alert ("Try  the  Mouse  Gestures!") 

} 

</script> 

Always  indent  code  that  you  write  within  the  curly  braces 
"  {  }  "—it  makes  it  neater  and  easy  to  understand. 

Example:  The  "if...  else"  statement 

<script  type  =  " text/ j avascript" > 
var  browser  =  navigator . appName ;    //get  the 
browser' s  name 

if  (browser=  =  "Opera"  ) 
{ 

alert ("Try  the  Mouse  Gestures!"); 

} 

else 
{ 

alert ("Well,    your  loss!"); 

} 

</script> 

Example:  The  "if...  else  if  statement 

<script  type  =  " text/ j  avascript" > 
var  browser  =  navigator . appName  //get  the 
browser's  name 

if  (browser=  =  "Opera"  ) 
{ 

alert ("Try  the  Mouse  Gestures!") 

} 

else  if    (browser=="Microsof t  Internet 
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Explorer" ) 

{ 

alert ( "Beef  up 

\ 

your  security  settings!") 

1 

else 

{ 

alert ( "Firef ox, 

eh?") 

} 

</ script> 

Example:  The  "switch"  statement 


< script  type=" text/ j avascript" > 
var  browser  =  navigator . appName  //get  the 
browser's  name 

switch (browser) 
{ 

case   "Opera" : 
alert ( "Try  the  Mouse  Gestures ! " ) 
break 

case   "Microsoft  Internet  Explorer" : 
alert ("Beef  up  your  security  settings!") 
break 

case   "Netscape" : 

alert ( "Firef ox  identifies  itself  as 
Netscape ! " ) 
break 
} 

</ script> 

The  "switch"  statement  takes  the  variable  "browser"  and 
compares  it  one  by  one  to  the  values  mentioned  in  the  "case" 
statements.  The  "break"  statement  prevents  the  browser  from 
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executing  the  very  next  line  of  code  and  tells  it  to  exit  the 
"switch"  block. 

The  conditional  operator 

There's  another  way  you  can  check  conditions  in  JavaScript— this 
one  specifically  if  you  want  to  assign  a  value  to  a  variable  based  on 
a  condition.  This  is  how  you  use  the  conditional  operator: 

variable  =    (condition)    ?  valuelfTrue  : 
valuelf False 

This  is  the  equivalent  of  this  "if...else" 
statement : 

if (condition) 
{ 

variable=valuelf True 

} 

else 
{ 

variable=valuelf False 

} 

3.4  Loops 

Programming  loops  let  you  execute  the  same  block  of  code  over 
and  over  as  many  times  as  you  like— a  far  sight  better  than  actually 
writing  the  same  lines  more  than  once.  The  simplest  example 
would  be  printing  the  numbers  1  to  10,  or  1  to  100,  for  that  matter. 
There  are  two  loops  you  would  use  in  JavaScript— the  "for"  loop 
and  the  "while"  loop. 

The  "for"  loop 

The  "for"  loop  is  typically  used  when  you  know  (or  can  predict) 
exactly  how  many  times  a  piece  of  code  will  run.  In  the  above 
example,  for  instance,  you  know  that  you  will  be  printing  a  num- 
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ber  100  times  and  not  more.  Here's  how  you  write  a  "for"  loop: 
for(i=0;    i<=100;  i++) 
{ 

document . write ( i+" <br>" ) 
} 

Here,  "i"  is  a  variable  that  exists  only  within  the  loop.  In  the 
brackets,  we've  started  "i"  with  a  value  of  0,  put  a  condition  that 
"i"  should  always  be  less  than  or  equal  to  100,  and  the  "i++"  state- 
ment increments  the  value  of  "i"  by  1  every  time.  The  output  of 
this  statement  will  be: 

1 

2 
3 


100 

The  "while"  loop 

If  we  were  to  translate  it  into  spoken  English,  the  "while"  loop 
effectively  tells  your  browser,  "As  long  as  this  condition  is  true, 
keep  executing  this  block  of  code."  You  would  typically  use  a 
"while"  loop  to  check  a  condition  rather  than  execute  code  a  spe- 
cific number  of  times.  Taking  the  same  example  as  above,  here's 
what  the  "while"  loop  would  look  like: 


while  ( i< 

=  100) 

{ 

document 

. write ( i+" <br>" ) 

i  =  i  +  l 

} 
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3.5  Functions  in  JavaScript 


We  took  a  cursory  look  at  what  functions  are  at  the  beginning  of 
this  chapter— let's  take  the  more  specific  context  of  functions  in 
JavaScript. 

Writing  a  function 

Writing  a  JavaScript  function  is  hardly  different  from  writing  any 
old  block  of  code— only  this  time,  you'll  be  enclosing  them  in  curly 
braces  and  giving  them  names.  Once  you've  written  a  function, 
you  can  make  it  execute  at  any  time  just  by  calling  it  by  name. 

Functions  are  best  written  within  the  <head>  tags  of  your 
HTML  document,  so  that  they  load  before  the  document  is  ren- 
dered in  the  browser.  Let's  write  a  function  that  tells  a  visitor 
which  browser  he  or  she  is  using. 

<html> 
<head> 
<script> 

function  checkBrowser ( ) 
{ 

var  browser  =  navigator . appName 
alert ( "You  are  using  "+browser) 
} 

</script> 
< /head> 
<body> 

<input  type= "button"  value= "Check  Browser!" 
onclick= "checkBrowser ( ) " > 
< /body> 
</html> 

The  statement  "onclick="checkBrowser()""  tells  the  browser  to  exe- 
cute the  "checkBrowser"  function  when  the  button  is  clicked, 
"onclick"  is  an  event  associated  with  the  button— we'll  get  to  events 
later  in  this  chapter.  You  can  also  have  functions  that  accept  argu- 
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merits,  which  it  will  then  manipulate  within  itself.  Let's  take  the 
example  of  a  function  that  squares  and  adds  and  then  displays  two 
numbers. 


<html> 

<head> 

<script> 

function  addAndPrint (a, b) 

{ 

document .write (a+b) 

) 

</ script> 

</head> 

<body> 

< input               type= "button" 

value= "Add ! " 

onclick= "addAndPrint (5 , 6 ) " > 

</body> 

</html> 

You  can  now  call  "addAndPrint"  anywhere,  and  give  it  any  two 
numbers  you  please. 


3.6  Using  Pop-Up  Boxes  In  JavaScript 


If  you've  tried  out  some  of  the  above  examples,  you  will  have  noticed 
that  the  "alertQ"  function  brings  up  a  popup  dialog  with  an  OK  but- 
ton. There  are  two  other  popup  dialogs  that  you  can  use  in  JavaScript: 

The  confirm  box 

Ever  encountered  an  "Are  you  sure  you  want  to  close  this  site?" 
with  an  OK  and  a  Cancel  button?  These  are  called  confirm  boxes, 
and  are  used  quite  often  in  conjunction  with  "if  and  "if...  else". 
Clicking  on  the  OK  button  sends  back  a  "true"  to  the  JavaScript, 
and  Cancel  sends  back  a  "false".  Here  is  a  piece  of  code  that  closes 
the  window  if  the  visitor  clicks  on  a  button  and  then  clicks  OK. 
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<html> 
<head> 
<script> 

function  CloseWindow ( ) 
{ 

if (confirm ( "Do  you  really  want  to  close  the 
window?" ) ) 
{ 

window . close ( ) 

} 
} 

</script> 
</head> 

<body> 

<input  type="button"  value="Die!" 
onclick= "CloseWindow ( ) " > 
< /body> 
</html> 

Note  that  This  bit  of  code  might  not  work  the  same  for  all 
browsers.  IE,  for  example,  will  ask  you  for  confirmation  again,  and 
when  we  tried  it  on  FireFox,  it  just  didn't  work. 

The  prompt  box 

You  would  typically  use  a  prompt  box  to  get  a  piece  of  information 
from  the  visitor— perhaps  a  name,  so  you  can  say  hello: 

<html> 
<head> 
<script> 

function  Hello () 
{ 

var  name=prompt ( "What  is  your  name?" , "name- 
less" ) 
/* 

The  first  argument  for  the  prompt  is  the 
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question  you  want  to  ask,    and  the  second  is  the 
value  to  use  by  default 
*/ 

alert ( "Hello,  "+name+"!") 
} 

</ script> 
</head> 

<body> 

<input  type="button"  value="Hi!" 
onclick="Hello ( ) " > 
</body> 
</html> 

3.7  Events  In  JavaScript 


Events  are  probably  where  you'll  find  JavaScript  used  the  most. 
Anything  that  "happens"  on  your  Web  page  is  an  event— a  mouse 
click,  the  cursor  moving  over  an  image,  hitting  a  key  on  the  key- 
board, and  so  on.  To  each  of  these  events,  you  can  associate  a  func- 
tion, called  an  event  handler,  which  will  execute  each  time  the 
event  occurs.  We've  already  seen  the  "onclick"  event  in  the  pre- 
ceding examples— the  function  that  is  assigned  to  it  using  the 
statement  "onclick  =  "[function  name]""  is  now  the  event  handler. 

Some  of  the  most  common  events  are: 

onChange: 

This  event  occurs  when  you  change  the  text  of  a  text  box  or  text 
area  and  move  the  cursor  out  of  it  (either  by  clicking  somewhere 
else  or  using  [Tab])  or  when  you  change  the  selection  in  a  drop- 
down menu,  to  state  the  more  common  uses. 

Usage: 

<input  type="text"   onChange="doThisNow ( ) " > 
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onload: 

This  event  occurs  when  the  pag 

e  finishes  loading.  You  would 

assign  it  an  event  handler  in  the  opening  <body>  tag: 
Usage: 

<body  onload="greetings ( ) " > 
onUnload: 

This  event  occurs  when  you  either  close  the  window  or  navigate 
away  from  the  page.  This,  too  is  assigned  a  handler  in  the  opening 
<body>  tag. 

onMouseOver  and  onMouseOut: 

These  two  events  are  used  primarily  to  create  animated  buttons 
and  menus.  To  illustrate,  let  us  take  an  example— an  image  that 
will  act  as  a  link  to  your  home  page,  and  display  another  image 
(perhaps  a  different  colour)  when  the  mouse  cursor  moves  over  it. 

<html> 
<head> 

< script  type= "text/ j avascript" > 

function  mouseover ( ) 

{ 

document . logo . src  =" logo_green.gif" 
} 

function  mouseOut ( ) 
{ 

document . logo . src  = "logo_blue . gif " 
} 

</script> 
</head> 

<body> 

<a  href=  "http://www.mysite.com" 
onMouseOver= "mouseover ( ) " 
onMouseOut= "mouseOut ( ) " > 

<img  src= "logo_blue . gif "  name="logo"  /> 
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</a> 

</body> 

</html> 

There  are  simply  too  many  events  to  list  here— you  will 
encounter  more  as  you  keep  learning  JavaScript.  Refer  to  chapter 
11  for  books  and  Web  sites  to  help  you  out. 

3.8  Manipulating  The  Browser  Window 


In  JavaScript,  you  can  use  the  "window"  object  for  some  useful 
(also  annoying  and  fun)  tasks.  To  open  a  new  window,  use  this 
statement: 

window . open ( "http : / / www . putyourURLhere . com" ) 

Note:  The  first  things  that  pop-up  blockers  look  for  is  a 
"window.openQ"  statement  that  is  either  associated  with  the 
"onload"  event  or  no  event  at  all.  So  if  you  use  the  statement  in 
any  of  the  aforementioned  manner,  all  self-respecting  browsers 
will  block  that  code.  Similarly,  to  close  a  window,  you  can  use: 

window . close ( ) 

A  fun  script  to  try 

Let's  write  a  script  that  should  freak  people  out  a  little.  After  a 
small  time  delay,  this  will  move  the  browser  window  to  a  new 
location— something  your  visitor  obviously  won't  be  expecting. 

<script> 

setTimeout ( "window. moveBy (2  00 , -200)",  5000) 
</ script> 

Note:  This  script  works  only  in  IE  and  Firefox. 

The  "setTimeout"  function  executes  the  statement  in  quotes 
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after  a  delay  of  5,000  milliseconds  (5  seconds).  It  comes  especially 
handy  if  you  have  a  part  of  your  page  that  needs  to  be  updated  at 
fixed  intervals. 

The  "window.moveBy(x,y)"  function  moves  the  window  x  pixels 
to  the  right  and  y  pixels  below.  If  you  give  it  a  negative  number, 
the  direction  will  reverse. 

Covering  JavaScript  adequately  would  probably  run  into  tens  of 
Fast  Tracks,  but  this  should  help  you  understand  at  least  the  basics. 
If  you  want  to  learn  more,  you  should  invest  in  a  bigger  book  or  turn 
to  the  Web.  To  find  out  about  books  and  sites,  turn  to  Chapter  11. 
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The  origins  of  PHP  can  be  attributed  to  Rasmus  Lerdorf,  a 
Danish-Canadian  programmer.  It  was  initially  known  as 
Personal  Home  Page  tools,  and  was  released  on  8  June  1995.  In 
1997  the  acronym  was  changed  to  Hypertext  Preprocessor.  The 
years  following  1997  saw  a  tremendous  spurt  in  the  number  of  users 
of  PHP,  and  there  was  even  a  more  organised  approach  to  making 
improvements  instead  of  it  being  a  small  team  effort. 
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4.1  PHP-The  What,  Why  And  Whodunit 


PHP  is  a  server-side  scripting  language,  and  is  the  open  source  alter- 
native to  Microsoft's  Active  Server  Pages  (ASP).  The  two  terms  Server 
Side  and  Scripting  Language  deserve  mention  first.  A  server  side  lan- 
guage resides  on  the  Web  server,  and  users  sitting  at  their  respec- 
tive workstations  can  interact  with  the  language  through  the  CGI 
(Common  Gateway  Interface),  or  directly  through  the  Web  server. 
What  actually  happens  in  a  server  side  language  is  the  code  is 
designed  to  run  on  the  server;  for  example  when  PHP  code  is 
encountered  in  a  page  requested  by  a  visitor,  the  server  executes  it 
and  the  result  is  sent  to  the  client.  The  benefit  is  that  no  plugin  is 
required  at  the  user's  end,  because  nothing  is  downloaded  to  the 
browser.  Servers-side  languages  are  more  powerful  because,  very 
simply  put,  they  run  on  servers,  and  are  not  dependent  on  the  capa- 
bilities of  an  unknown  workstation  present  anywhere  on  the  Net. 

A  Scripting  Language  is  unlike  other  programming  languages 
because  it  is  interpreter-based,  as  opposed  to  compiler-based. 
Being  an  Interpreter-based  language,  it's  easier  to  modify  because 
individual  lines  of  code  can  be  executed,  as  opposed  to  compiler- 
based  languages,  where  a  complete  sequence  needs  to  be  written. 

PHP  is  gaining  popularity  every  passing  moment,  and  why  not? 
The  OSS  (Open  Source  Software)  tag  means  the  entire  code  in 
which  it  was  developed  is  openly  available  for  whatever  modifica- 
tions users  deem  necessary.  PHP  is  cross-platform,  meaning  it  can 
be  run  on  any  Web  server,  and  along  with  MySQL  (a  small  database 
server)  can  be,  for  example,  used  to  develop  under  Windows,  and 
serve  on  a  Linux  platform  or  vice  versa.  OS  independence  is  anoth- 
er strong  feature— unlike  ASP,  which  requires  the  Windows  plat- 
form. Besides  this,  PHP  is  free! 

PHP  sees  most  frequent  use  with  Apache  (the  Web  Server)  on 
most  platforms.  On  the  Windows  side,  PHP  can  be  used  with 
Microsoft's  IIS  (Internet  Information  Services).  To  get  using  PHP 
properly,  you'll  need  a  basic  knowledge  of  HTML  and  XHTML. 
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The  biggest  advantage  that  an  application  can  get  by  going 
open  source  is  the  sheer  bounty  of  talent  in  the  form  of  thousands 
of  developers  who  dedicate  time  and  grey  matter  to  simplify 
and/or  improve  the  application.  Another  major  advantage  PHP 
enjoys  is  that  it's  extremely  light  on  system  resources. 

Another  way  of  looking  at  PHP's  popularity  is  the  growing 
number  of  Web  sites.  A  site  today  is  very  different  from  a  site  of  a 
few  years  ago,  simply  because  of  its  users.  A  typical  user  is  not  sat- 
isfied with  an  ordinary  site  with  some  text  and  pictures.  He  wants 
something  attention-grabbing,  something  that  serves  not  only  his 
purpose,  but  also  makes  browsing  fun.  Animations  and  interactiv- 
ity form  a  large  part  of  that  fun  factor,  and  coding  in  PHP  is  sim- 
ple—you can  achieve  a  lot  more  with  fewer  lines  of  code. 

PHP  code  is  similar  in  syntax  to  Perl  and  C.  For  those  not  inter- 
ested in  getting  too  much  into  coding,  there  are  PHP-based  CMSes 
(Content  Management  Systems)  available,  like  PHP-Nuke,  which 
don't  require  the  user  to  have  any  programming  knowledge. 
However,  the  flexibility  of  PHP  cannot  be  denied,  and  all  that  PHP- 
Nuke  allows  is  basic  Web  page  manipulation,  so  we  shall  refrain 
from  such  front-end  efforts.  The  basic  purpose  of  PHP  is  server-side 
coding,  so  lets  gets  down  to  it! 
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4.2  Prerequisites 


For  the  platform  and  environment  we  used  EasyPHP  version  1.8, 
which  we've  provided  on  the  Digit  CD.  The  main  reason  for  using 
EasyPHP  is  ease  of  use— it  installs  The  Apache  Web  Server  and 
MySQL  automatically,  and  configures  everything,  making  your  job 
as  a  relative  beginner  infinitely  simpler.  EasyPHP  is  not  greedy  for 
resources,  so  a  system  that  is  even  a  couple  of  years  old  will  easily 
handle  all  the  applications  thrown  at  it. 

PHP  is  a  programming  language,  unlike  HTML,  which  is  simply 
a  markup  tool,  and  PHP  can  even  be  embedded  inside  an  HTML 
document.  As  you  will  see  in  the  examples  later  on  in  this  chapter, 
PHP  code  is  distinguished  as  executable  by  the  PHP  interpreter  on 
the  basis  of  it  encountering  "<?php".  This  signifies  that  the  fol- 
lowing lines  are  actually  PHP  code,  and  the  execution  is  terminat- 
ed by  "?>".  This  combination  can  be  used  multiple  times  in  a  doc- 
ument: each  time,  the  proper  beginning  and  termination  encap- 
sulate PHP  code,  while  the  remaining  body  of  the  document  can 
contain  HTML.  This  is  what  we  mean  by  "embeddable."  Clicking  on 
"View  Source"  in  your  browser  doesn't  do  anything  except  display 
HTML  code.  This  is  because  PHP  scripts  are  executed  on  the  server 
(since  PHP  is  server  side  and  the  installation  resides  there),  and  the 
resulting  HTML  is  sent  to  the  browser  on  the  workstation  from 
where  the  execution  commenced. 

PHP  code  can  be  written  in  Notepad,  and  many  HTML  editors 
support  it  as  well. 
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4.3  Getting  started 


Installing  EasyPHP  is 
a  piece  of  cake,  or 
rather  a  sip  of  tea.  It's 
snappy  for  one,  and 
totally  automated. 
Browse  through  to 
your  EasyPHP  direc- 
tory; you  will  find  a 
folder  named 
"www",  among  oth- 
ers. Inside  this  folder 
is  a  .php  file  called 
"Index".  Simply 
opening  this  file  in 
Notepad  will  display 
code,  as  we  mentioned  earlier,  as  the  scripts  are  server  executed. 
Your  first  lesson  begins  here. 

Start  EasyPHP  from  the  Start  Menu,  and  open  your  browser. 
Type  in  "http://localhost"  and  you  will  see  the  default  EasyPHP 
page.  In  fact,  after  using  Notepad  or  Wordpad  for  creating/editing 
PHP  code,  simply  save  it  as  a  .php  file  and  you  can  simply  use  the 
syntax  //localhost/<filename>.php  in  your  browser's  address  bar, 
and  the  Web  page  you  created  will  appear  in  the  browser  window. 

If  you're  using  another  computer  as  your  server  (meaning 
your  PHP  installation  resides  there)  you  can  simply  type  in  the 
IP  address  of  that  machine  into  your  browser's  address  bar.  If 
you're  using  your  own  machine  as  a  server  as  well  as  Web  serv- 
er, you  may  not  be  able  to  view  the  PHP  default  page,  or  any 
other  Web  page  by  using  your  own  IP  unless  you  follow  these 
steps  (only  applicable  if  you  use  a  proxy  server  to  connect  to 
the  Internet). 


Use  a  browser  to  display  the  result  of  your 
PHP  code 
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1.  In  your  browser  window  address  bar,  type  in  "aboutxonfig" 

2.  In  the  filter  option,  type  in  "proxy" 

3.  In  the  search  results,  navigate  to  "network.  proxy.no_proxies  _on" 

4.  Double-click  on  this— you  will  see  a  box  with  one  IP  as  a  default 
value,  typically  127.0.0.1.  Add  a  comma  and  enter  your  own  IP 

5.  You  can  now  use  your  own  IP  address  in  the  address  bar. 


Here's  a  screen- 
shot  of  about:config; 
highlighted  is  the  net- 
work.proxy.no_prox- 
ies_on,  the  entry 
where  the  hosts  IP 
address  is  to  be  added. 


The  about:config  IP  setting 


Note  that  about: 
config  only  works 
with  Mozilla  and 
Opera.  IE  users  will  need  to  go  to  Control  Panel  >  Internet  Options 
>  Connections  >  LAN  Settings  >  Bypass  Proxy  Server  for  Local 
Addresses.  This  entry  should  be  checked. 

Let's  get  down  to  creating  your  very  first  code  in  PHP.  Before  we 
take  the  plunge,  however,  there  are  a  few  rules  to  remember. 

1.  The  file  containing  the  PHP  code  needn't  be  an  executable; 
rather,  the  .php  extension  does  its  magic  here. 

2.  PHP  looks  for  opening  and  closing  tags  to  distinguish  between 
PHP  code  and  the  rest  of  the  html  document.  These  start  and 
stop  tags  are  very  simply  "<?php",  which  will  cause  parsing  of 
any  code  found  after  it.  Parsing  is,  very  simply  put,  syntax  analy- 
sis, and  the  program  devoted  to  this  task  of  analysing  an  input 
sequence  in  order  to  determine  its  grammatical  structure  is 
called  a  parser.  The  closing  tag  "?>"  will  simply  cause  code  placed 
after  it  to  be  treated  as  HTML,  until,  of  course,  another  "<?php" 
is  encountered.  This  makes  PHP  embeddable,  and  most  Web 
pages  contain  PHP  code  embedded  within  the  html  document. 
You  can  also  use  short  tags— just  "<?"  and  "?>" 
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3.  Like  C,  every  line  of  PHP  code  must  end  with  a  semicolon  (;), 
which  indicates  a  line  termination. 

4.  Variables  are  declared  with  a  $  symbol;  a  variable  may  contain 
an  alphanumeric  string,  numbers,  or  an  array.  Note  that  in  the 
example  below  we  have  declared  a  variable  named  "digit", 
which  is  preceded  with  a  $  symbol. 

5.  Once  again,  like  C  and  C++,  PHP  supports  comments  enclosed 
within  /*  and  */.  Nesting  of  comments  is  impossible,  however,  as 
the  comment  ends  as  soon  as  the  first  */  is  encountered.  Note 
that  we  have  used  the  //  operator,  which  is  used  for  single-line 
comments.  The  /*  and  */  works  best  for  multiple-line  comments, 
and  in  such  a  case  saves  the  user  from  remembering  to  use  a  // 
for  every  line. 

Let's  look  at  a  sample  now,  our  first  little  program: 
Example  1 

<?php 

//  this  is  our  first  program 

//  the  formatting  operators  have  also  been 
used  here,    like  <i>,   which  is  the  //  italics 
operator,    while  <br>  simply  causes  the  state- 
ments following  to  go  to  //  the  next  line.  Note 
the  use  of   "//"   these  are  the  comment  inserts 

//  and  statements  on  the  same  line  as  them 
are  not  executed 

echo  "Question:  Are  you  enjoying  this  month's 
<i>Fast  Track</i>  so  f  ar?<brxbr>"  ; 

$digit=l; 

if  ($digit==l) 
{ 

echo   "Correct  Answer— Yes  you 
are<brxbr>"  ; 

echo   "NOT  as  much  as  we  enjoyed  writ- 
ing it  I  bet  11"; 
} 

?> 
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The  start  tag  (<?php)  is  first  as  usual,  followed  by  the  echo  com- 
mand, which  displays  a  message  or  "string"  on  the  screen.  The  <i> 
is  used  to  display  text  in  italics;  we  then  assign  a  value  to  the  vari- 
able "digit",  while  declaring  it. 

The  If  statement  follows,  with  a  condition  to  display  some  text 
if  its  parameters  are  met,  i.e.  if  the  variable  "digit"  is  equal  to  1, 
which  it  is,  as  we  assigned  the  value  just  above. 

As  seen  from  this  example,  the  similarity  to  the  C/C++  and 
Unix  Perl-style  programming  is  strong. 
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The  result  of  our  first  program 


The  file,  named  DIGIT.php,  was  placed  in  the  "www"  folder, 
where  a  simple  "//localhost/  DIGIT.php"  typed  into  the  browser 
pane  would  open  the  result  of  our  labour  directly  in  the  brows- 
er window. 

Having  used  the  If  statement  above,  it  would  be  apt  if  we  dis- 
cuss the  various  conditional  operators  that  PHP  supports. 
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4.4  Conditional  Operators 


We've  seen  how  conditional  operators  work,  in  chapter  3.  These 
include  the  if...else  statement,  which  we've  used  in  the  example 
above.  Then  there  is  the  if...elseif  statement,  which  isn't  as  efficient 
as  the  switch  statement  when  multiple  conditions  are  possible.  The 
switch  statement  is  perfect  for  use  when  multiple  conditions  are 
present,  and  looks  much  more  streamlined  than  the  blockier  cod- 
ing that  would  result  if  the  elseif  statement  were  to  be  used. 

Then  there  are  the  for  and  while  loops,  the  syntaxes  of  which 
are  as  follows: 

for    (initialization;    condition;  increment) 
{ 

code  to  be  executed; 

} 

and 

while  (condition) 
code  to  be  executed; 

There  is  also  the  do-while  statement,  which  causes  execution  of  a 
block  of  code  at  least  once,  and  is  then  based  on  the  fulfilment  of 
the  condition  stated  in  the  while  statement. 

Let's  move  on  to  our  next  example,  since  it's  much  easier  to  fol- 
low programming  syntax,  with  a  practical  hands-on!  PHP  has  a 
number  of  conditional  operators,  and  the  for,  while,  switch,  and  if 
statements  can  be  used.  The  for  and  while  loops  have  been  used  in 
the  example  below. 
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Example  2 

<?php 
$a=l; 
$b=2  ; 
$m=l; 

/*  The  For  loop  contains  a  condition  for  the 
variable    1 B'   being  less  than  or  equal  to  10,  in 
the  final  part  of  the  for  statement  b  has  been 
incremented,    while    'A'    has  been  reset  to  the 
value  1.   Note  that  the  first  part  of  the  For 
statement  has  been  left  out,    i.e.    the  initiali- 
sation part  */ 

for    (  ;$b<  =  10;$b=$b+l, $a=l) 

{ 

while  ($a<=12) 
{ 

$m=$b*$a ; 

//  Variable  m  has  been  assigned  the  product 
value  of  variables  a  and  b  // 
echo   "$b  *   $a  =  $m  <br>" ; 
$a=$a+l ; 

//  the  variable    'A'   needs  to  be  incremented 

} 

echo   "<br>" ; 

} 

?> 

This  program  very  simply  displays  the  product  of  two  variables, 
to  which  we  have  assigned  values.  In  simpler  words,  this  program 
displays  maths  tables  up  to  10! 

We  assign  values  to  $a,  $b  and  $m  while  declaring  them.  Use  of 
the  for  operator  sees  us  assigning  a  condition  to  the  variable  $b,  so  the 
statement  loops  till  $b  reaches  the  magic  figure  of  10.  At  the  same 
time,  we've  incremented  $b  ($b=$b+l)  every  time  the  loop  is  run. 
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A  nested  loop  has  been  created  using  while,  where  we  com- 
mand the  statements  within  the  inner  brackets  to  execute,  until 
the  value  of  the  variable  a  is  equal  to  12.  A  simple  multiplication 
operator  is  used  next  to  actually  compute  the  product,  while  the 
display  statement,  (via  the  echo  command),  ensures  that  you  see 
the  tables  displayed  in  your  browser  window.  Finally,  after  every 
loop  we  have  incremented  the  value  of  $a. 

If  you  notice,  we  have  added  the  statement  "$a=l"  inside  the  for 
statement,  else  once  the  value  of  $a  becomes  12,  the  program  will 
terminate  after  just  displaying  one  set  of  the  two-times  table. 

Let's  see  some  more  practical  examples  of  PHP  code.  Below  is  a 
program  that  changes  the  background  colour  of  the  browser  page 
based  on  which  day  it  is.  A  simple  array  (we  have  covered  arrays 
later  in  this  chapter),  Sbgcolor,  has  been  defined,  with  the  respec- 
tive colours  for  the  seven  days  of  the  week.  Note  that  the  colours 
defined  are  in  hexadecimal  format.  Hexadecimal  format  is  a  very 
compact  and  easily  convertible  to  and  from  other  systems,  like  the 
decimal  and  binary  system.  A  base  of  16  is  used,  including  num- 
bers from  zero  to  nine  (0—9),  and  the  first  six  letters  of  the  English 
language,  i.e.  A,  B,  C,  D,  E  and  F.  Another  variable  "$today"  which 
is  assigned  the  "date"  function,  and  a  variable  x.  The  date  function 
as  you  might  have  guessed  is  responsible  for  getting  the  current 
system  date. 

The  simple  output  of  this  program  will  be  the  statement  "This 
just  changes  the  colour  of  the  screen  based  on  the  day  of  the 
week",  with  the  background  colour  of  the  screen  of  course  chang- 
ing according  to  the  day  of  the  week. 
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Example  3 


<html> 

<head> 

<title>Background  Colors  change 

based  on  the 

day  of  the  week</title> 

</head> 
<? 

$today  =  date ( "x" ) ; 

$bgcolor  =  array ( 

"#E6EDFF" ,    "#FFFFFF" ,    "#FBFFC4" , 

"#E9FFE6" , 

"#FEF0C5",    "#FFE0DD" ,  "#F0F4F1" 

)  ; 

?> 

<body 

bgcolor=" <  ?print ( "$bgcolor [$ today] " 

)  ;?>"> 

<brxbrxb>This  just  changes  the 

colour  of 

the  screen  based  on  the  day  of  the 

week 

< /body> 

</html> 

4.5  Functions 


Although  functions  have  been  covered  in  the  previous  chapter,  any 
reference  to  programming  needs  a  reference  to  functions  as  well, 
so  here  we  go  again!  A  function  is  an  independent  module  of  code, 
that  can  be  executed  either  as  part  of  a  program,  or  can  be  called 
from  any  other  part  of  a  program  to  be  executed.  Functions  are 
one  of  the  most  important  aspects  of  programming.  In  a  large 
database,  instead  of  individually  adding,  deleting  or  modifying 
records  (the  three  default  actions  that  may  could  be  performed  on 
a  database,  as  routine  maintenance),  individual  functions  can  be 
written  for  the  same.  Whenever  a  record  is  to  be  edited;  the  mod- 
ification function  can  be  called  for  execution,  saving  the  pro- 
grammer from  extra  code  writing,  and  of  course,  program  logic. 
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Functions  can  be  written  to  return  values,  or  write  output 
information.  Functions  can  also  be  nested,  meaning  one  function 
can  contain  one  or  more  functions  within  its  brackets.  Besides 
user-defined  functions,  PHP  has  some  750  inbuilt  functions. 

We've  given  two  examples  below;  in  the  first  example,  a  func- 
tion is  used  to  simply  display  text.  In  the  second,  we  see  a  function 
returning  values. 

Example  4 

<?php 

function  Name ( ) 
{ 

echo   "DIGIT" ; 
} 

function  narael () 
{ 

echo   "Test  Centre" ; 

} 

echo   "<b>Hi  Readers  !  <brxbrxb>"  ; 
echo   "This   is    " ; 
Name ( ) ; 

echo   " .  <brxbr>  and  all  of  us  at   "  ; 
Name 1 ( ) ; 

echo   "<brxbr>  Hope  you  enjoyed  this  months 
issue" 
?> 


Our  very  humble  program, 
when  executed  would  look  some- 
thing like  this: 

Lets  take  a  look  at  a  function 
returning  a  value  based  on  a  sim- 
ple addition. 


.-,!-,.-.--  £j htir i \vatw..jUr>i.:t-tl  pip 

Thii  ii  TJTCrTI. 

u.J  .ii  A  i.    j.  Iv.l  dull* 

Using  functions  to  display  text 


66 


SMI  FAST  TRACK 


WEB  DESIGN 


PHP 


IV 


Example  5 

<?php 

function  add($a,$b) 
{ 

$total  =  $a  +  $b; 
return  $total ; 
} 

$sum  =  add (5 , 8) ; 

echo  "5  +  8  =  ".$sum; 

?> 

A  function,  "add",  is  declared,  with  the  parameters  $a  and  $b, 
two  variables  that  are  being  passed.  The  sum  of  these  two  variables 
is  being  passed  to  a  variable  $sum,  where  the  result  of  the  addi- 
tion is  displayed. 

4.6  Arrays 


An  array  is  a  data  structure  capable  of  storing  one  or  more 
than  one  value  in  a  single  value.  PHP  supports  arrays  as  a  data 
type  as  well.  Arrays  are  very  useful  to  store  large  numbers  of 
similar  variables. 

An  array  is  similar  to  a  matrix;  every  element  of  an  array  has 
its  own  address,  and  can  be  referenced  using  that  address.  Arrays 
have  great  practical  importance  in  any  programming  language, 
and  particularly  in  PHP.  Suppose  a  user  wishes  to  load  a  list  of 
clients  from  his  database  to  use  on  his  Web  page;  he/she  would  typ- 
ically load  it  into  an  array.  In  all  practical  terms  it  would  be  high- 
ly inefficient  to  declare  variables  for  each  client,  wouldn't  it? 
Here's  where  array's  come  into  the  picture:  not  only  is  the  code 
minimised,  but  efficiency  in  terms  of  storage  and  execution  of 
scripting  code  can  maintained. 
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In  PHP  arrays  can  be  of  three  types: 

1.  Numeric  arrays— here  a  numeric  ID  key  is  used  to  store  ele- 
ments. This  key  can  be  manually  or  automatically  assigned  to 
each  element. 


Example  6 


$fruit  = 

array ( "Mango" , "Apple" , 

"Pineapple" , "Orange" ) ; 

In  the  above  example,  the  ID  keys  are  assigned  automatically. 

Example  7 

$fruit[0]  = 

=   "Mango" ; 

$fruit[l]    =  "Apple"; 

$fruit[2]  = 

"Pineapple" ; 

$fruit[3]  = 

"Orange" ; 

This  achieves  the  exact  same  result  as  Example  6,  only  we  have 
assigned  the  ID  keys  manually  here. 


2.  Associative  Arrays— here  the  numeric  ID  key  is  assigned  a 
value.  Useful  when  the  array  is  much  larger;  each  of  the  ele- 
ments can  be  referenced  by  calling  them  directly,  or  using  the 
numeric  value. 

Example  8 

$Q3f rags [ 'Maximus' ]    =  "100"; 
$Q3f rags  ['Vandal' ]    =  "65"; 
$Q3f rags [ 'Andreophile' ]    =  "48"; 
$Q3frags [ 'Badjag' ]    =  "52" 

If  you  look  at  example  2,  you  will  see  an  identical  approach  to 
array  declaration,  we  could  also  have  defined  similar  to  example 
one,  which  would  look  something  like  this: 

$Q3frags  =  array (    "Maximus"  =  >100 , 
"Vandal"=>65,    "Andreophile" =>48 ,    "Badj ag" =>52 ; 
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Both  the  above  examples  achieve  the  same  thing,  only  in  two 
different  ways  of  declaring.  Just  make  sure  to  choose  a  particu- 
lar syntax  and  stick  with  it— there's  nothing  more  irritating  for 
a  coder  to  come  across  similar  statements  using  different  alter- 
nate syntaxes. 


3.  Multidimensional  Arrays  are  a  group  of  arrays  declared  within 
a  single  larger  array.  Each  element  can  also  be  an  array. 


$amdcpu  =  array ( 

"FX"=>array 

( 

"FX6  0" , 

"FX57" , 

"FX55" , 

"FX53" , 

"X2"=>array ( 

)  , 

"4800+" , 

"4600+" , 

"4400+" , 

"4200+" , 

"3800+" , 

"Venice" =>array ( 

"3800+" , 

"3500+" , 

"3200+" , 

)  ; 

"3000+" , 

) 

In  the  above  example,  we  have  defined  an  array  "amdcpu", 
which  is  the  main  array,  or  a  multidimensional  array.  This  array 
contains  a  number  of  smaller  arrays,  each  with  their  own  entries 
denoting  processors  from  a  particular  family.  As  you  can  see,  it's 
simply  a  case  of  an  array  containing  another  array! 
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Working  with  Files 

PHP  has  inbuilt  functions  for  working  with  files.  Here  are  some 
basic  commands  needed  to  get  you  started  with  file  handling.  File 
handling  is  an  integral  part  of  PHP:  it  allows  the  programmer  to 
manipulate  an  existing  file  for  either  reading,  or  modification. 
PHP  scripts  are  frequently  used  to  work  with  data  stored  in  sepa- 
rate files,  be  they  documents  or  spreadsheets,  and  the  following 
commands  allow  programmers  to  manipulate  files  that  contain 
data  pertinent  to  the  very  purpose  of  writing  the  programming 
script  in  the  first  place. 

fopen():  This  function  is  used  to  open  files  in  PHP.  There  will  be 
two  parameters  inside  the  parentheses,  the  first  being  the  name  of 
the  file  to  be  opened,  and  the  second  parameter  specifying  the 
mode  in  which  it  should  be  opened.  If  fopenj)  is  unable  to  open  the 
file,  a  zero,  indicating  false,  is  returned. 

fclose():  the  exact  reverse  of  fopen(),  used  to  close  files  opened 
with  fopenQ. 

fgetc():  This  command  is  used  to  read  a  single  specified  character 
from  a  file.  Note  that  the  pointer  has  to  be  moved  to  the  next  char- 
acter once  a  match  is  found.  This  command  can  also  be  used  to 
read  the  contents  of  a  file,  character  by  character,  as  we've  done  in 
the  example  below.  By  far  one  of  the  most  important  file  handling 
commands. 

feoff):  Used  when  a  particular  condition  is  to  be  checked  until  the 
end  of  the  file  is  reached.  This  command  will  return  a  "true"  when 
the  end  of  a  file  is  reached. 

An  example: 

<?php 

$f =f open ( "to_our_readers . txt" , "r" )  or 
exit ("Unable  to  open  file!"); 

//  Using  while  statement  to  search  till  the 
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end  of  the  file  is  reached 
while  (!feof($f)) 
{ 

//  each  character  is  picked  up  one  by  one  and 
displayed  i.e.    the  entire 

//  contents  of  the  file  to_our_readers 
$x=fgetc  ($£)  ; 
echo  $x; 

} 

fclose ($f ) ; 
?> 

We  simply  created  a  .txt  file  titled  "to_our_readers".  In  the  first 
statement,  either  the  file  is  opened  in  memory,  or  a  message  is  dis- 
played: "unable  to  open  file".  The  While  statement  will  loop  as  long 
as  the  end  of  the  file  isn't  reached;  one  reached,  the  program  will 
exit.  Note  that  it  is  good  practice  to  always  close  a  file  you  open. 
Here  the  term  Open  doesn't  mean  open  to  view;  the  file  is  simply 
opened  in  memory.  One  cannot  actually  view  its  contents,  except  by 
using  some  programming  logic  similar  to  what  we  have  used  above. 

Form  Handling 

A  form  in  HTML  simply  denotes  a  section  of  a  document  con- 
taining normal  content,  markup  or  special  elements  like  check- 
boxes, radio  buttons,  menus  etc.  and  the  labels  for  them.  This 


i  W  !t*.,_^a 

1  =—  ■  1 

Form  handling 


form  is  then  completed  by  users,  who  may  add  text,  select 
options  from  a  menu  etc.  PHP  interacts  very  well  with  html 
forms.  One  important  advantage  with  PHP  is  that  any  form  in 
your  HTML  document  is  automatically  available  to  PHP  scripts 
anywhere  in  that  document. 
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Here's  an  example: 

<html> 

<body> 

Welcome  <?php  echo 

$_POST ["name"] ;    ?>.<br  /> 

You  are  <?php  echo 

$_POST  ["age"]  ;   ?>  years  old! 

</body> 

</html> 

We've  created  a  .php  file  with  the  above  code.  If  you  attempt  to 
execute  this  file,  however,  you'll  get  an  error  simply  because  the 
variables  haven't  been  assigned  any  values.  We  now  create  anoth- 
er .php  file,  with  the  code  as  given  below. 


<html> 
<body> 

<form  action=" f ormhandling . php"  method=" POST" > 
Enter  your  name:    <input  type="text" 
name =" name"  /> 

Enter  your  age:    <input  type="text"  name="age" 

/> 

<input  type=" submit"  /> 

</ f orm> 

</body> 

</html> 

This  code  actually  redirects  to  the  file  mentioned  (in  this  case 
"formhandling.php"),  passing  on  the  values  for  "name"  and  "age", 
and  uses  these  values  with  the  output  statements  given  in  the  pre- 
vious script. 


In  the  next  chapter  we'll  focus  on  site  design  tools,  a  far  cry 
from  PHP  scripting,  but  nonetheless  a  necessary  part  of  Web  site 
integration  and  design. 


:*: 

■  ■■■  ■ 

A  simple  page  with  values  passed  from  another  PHP  script 
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Site  Design  Tools 


If  you  want  to  design  a  Web  page  and  don't  want  to  learn  too 
much  coding— no  problem!  There  are  a  number  of  tools  available 
that  can  be  used  to  create  a  Web  site  which,  depending  on  your 
creativity,  can  even  look  as  if  it  has  been  designed  by  a 
professional. 
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Earlier,  Web  sites  were  written  in  basic  HTML  (HyperText  Markup 
Language),  a  markup  language  that  gives  a  Web  page  basic  struc- 
ture such  as  headings  and  paragraphs.  This  was  an  easy  way  to 
view  Web  pages  for  people  who  had  only  recently  migrated  from 
the  text-based  shell  account  to  a  TCP/IP  account,  and  provided  a 
much  richer  Web  surfing  experience  because  they  could  view 
images  for  the  first  time. 

As  the  years  went  by,  HTML  became  more  and  more  complex. 
New  forms  of  layout  devices— such  as  tables— came  to  be  used,  and 
were  found  to  be  a  better  way  to  place  data.  Then  came  CSS  or 
Cascading  Style  Sheets,  a  stylesheet  language  that  is  used  to 
describe  the  style  of  elements  in  a  document  marked  up  using  a 
markup  language.  Database  integration  technologies  such  as  serv- 
er-side scripting  also  changed  the  way  the  Web  is  made. 

A  Web  site  is  a  patchwork  of  files  of  various  types  such  as 
HTML,  images,  multimedia,  PDF,  and  more.  In  order  to  keep  them 
linked  to  each  other,  code  written  in  a  markup  language  is  neces- 
sary, and  there  are  various  tools  aimed  at  doing  just  this.  To  design 
a  complete  Web  site,  four  kinds  of  software  are  necessary: 

o  Code  editors 
o  Web  browsers 
o  Image  editors 

o  Multimedia  editing  and  design  tools,  plug-ins,  etc. 

You  will  learn  how  to  work  with  various  code  editors  in  this 
chapter,  so  as  to  get  yourself  started  with  building  your  very  first 
Web  page. 
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5.1  CoffeeCup  HTML  Editor  2006 


CoffeeCup  is  an  HTML  editor  with  drag-and-drop  support  and  an 
inbuilt  FTP  uploading  facility.  Tables,  frames  and  forms  can  all  be 
created  using  easy-to-use  Wizards.  It  supports  HTML  4.0  and 
XHTML  tags.  It  also  includes  Wizards  for  images  and  links,  and  a 
Quick  Start  so  you  can  create  Web  pages  in  no  time. 

If  you  wish  to  learn  HTML,  you  can  use  the  Code  Editor  and  the 
Visual  Editor.  CoffeeCup  comes  with  more  than  100  DHTML  and 
JavaScripts,  a  DHTML  Menu  wizard,  25,000  graphics  and  photos 
including  more  than  1,000  XP  Style  Icons,  and  access  to  more  than 
500  free  Web-site  templates.  It  includes  an  HTML  Code  Cleaner, 
which  rids  the  HTML  code  of  unnecessary  data  and  provides  clean 
and  easy-to-understand  code.  Also  included  are  a  Project  Manager, 
a  Flash  Text  Wizard,  a  Color  Scrollbar  Wizard,  a  Stylesheet  Editor, 
and  a  List  Wizard. 

5.1.1  Getting  started  with  CoffeeCup 

When  you  launch  this 
HTML  editor,  you  will  be 
greeted  with  a  dark  screen 
with  a  CoffeeCup  logo  and 
a  Tip  of  the  Day.  Click  on 
the  File  menu  and  select 
New  from  Quick  Start.  The 
Quick  Start  window  will 
appear.  Enter  the  title  of 
the  page  in  the  Page  Title 
box.  Enter  the  background 
image  for  your  Web  page 
in  the  Background  Image  box.  You  can  now  choose  the  colours  of 
the  background,  text,  links,  and  visited  links  and  active  links,  and 
preview  on  the  right  how  it  will  appear.  Alternatively,  you  can 
choose  a  preset  colour  scheme  from  "Use  the  Following  Color 
Scheme"  drop-down  box. 


The  CoffeeCup  main  window 
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Click  on  the  Advanced 
tab  to  key  in  the  Meta 
information  that  is 
accessed  by  search  engines, 
such  as  a  short  description 
of  your  page  and  the  key- 
words associated  with  it. 
You  can  also  specify  a  redi- 
rect URL  if  needed.  Once 
you  are  done  filling,  click 
on  the  Cool  button  and  a 
new  page  will  open. 


PtQt  Kids: 
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The  Quick  Start  window  in  CoffeeCup 


St    6*    B\n    Ben  ; 


r  *i  T  T    "  " 


You  will  view  the  Code 
Editor  by  default.  Click  on 
the  Visual  Editor  tab  to 
view  the  visual  mode  of 
the  editor,  which  we  shall 
be  using  henceforth.  Code 
Editor  is  the  mode  where 
you  can  directly  edit  the 
HTML  code,  whereas  in 
the  Visual  Editor,  you  can 
actually  view  how  your 
page  will  appear,  and  use 
the  drag-and-drop  support 

to  place  objects  on  your  page.  You  will  be  prompted  to  save  the  file 
before  switching  to  the  Visual  Editor,  so  save  it  as  index.html. 


The  Code  Editor  View  in  CoffeeCup 


Once  you  are  in  the  Visual  Editor,  you  will  see  a  blank  screen. 
You  can  now  start  creating  your  own  Web  page. 

5.1.2  Adding  text  objects  to  the  page 

To  start  with,  we  shall  add  some  text  to  our  page.  Click  on  the  Format 
menu  and  mouse  over  to  Font  >  Font  Wizard.  Here  you  can  set  the 
font,  size,  colour,  and  more.  Now  type  in  whatever  you  want  to 
appear  on  your  Web  page,  and  it  will  appear  in  the  chosen  font  style. 
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5.1.3  Inserting  an  image 

Now  let  us  add  an  image  to  the  page.  Under  the  Insert  toolbar 
menu,  choose  Insert,  or  click  the  Insert  Image  icon  just  above  the 
edit  area. 

Select  an  image  from 
amongst  the  free  graph- 
ics provided  with  the  pro- 
gram, or  choose  an  image 
of  your  choice  from  the 
left  of  this  window.  Enter 
the  path  to  the  image  in 
the  Image  box.  Enter  the 
text  that  should  appear  if 
the  image  is  not  available 
or  broken,  in  the  Alt  Text 
box.  You  can  also  set  the  image  alignment  and  the  border,  as 
also  the  height  and  width  of  the  image.  You  can  also  make  the 
image  clickable  as  a  link  by  placing  a  URL  in  the  "Create  Image 
as  Link"  box. 

Clicking  on  the  Thumbnail  tab  will  provide  the  option  of 
inserting  a  thumbnail  of  the  original  image  into  the  page  instead 
of  the  original.  The  user  can  then  link  back  to  the  original  file. 

You  will  be  prompted  to  copy  the  image  to  your  working  fold- 
er. Click  Yes. 

5.1.4  Inserting  a  link 

To  add  links  to  your  page,  click  on  the  Insert  menu  and  then  on 
Link.  The  Insert  Link  window  will  open. 

"Link  Text"  is  the  text  that  will  appear  in  the  document  that 
the  user  will  click  on  to  access  the  link.  "URL"  is  the  URL  of  the  Web 
site  being  linked  to.  "Target  field"  can  be  left  blank  unless  the  user 
has  a  specific  frame  they  want  the  linked  page  to  appear  in.  "Title" 
displays  the  title  of  a  link  in  a  small  box  when  the  user  hovers  over 
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Inserting  an  image  into  your  page 
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URL  to  Link  to: 


Target:  | Page  Default  (none) 


Status  Window  Message:  

□  Show  Stetus  Window  Message  On  MeuseOver 


Inserting  a  link  into  your  page 


it  with  the  mouse.  Text 
entered  in  the  Status 
Window  Message  will  be 
displayed  at  the  bottom  of 
a  browser  in  the  status 
area.  Click  on  the  Cool  but- 
ton after  you're  done. 

In  a  similar  way,  you 
can  insert  an  e-mail  link 
by  clicking  on  Insert  >  E- 
mail  Link.  An  Insert  E-mail 
Link  window  will  open. 
Again,  Link  Text  is  the  text 
that  will  appear  in  the 
document  that  the  user 
will  click  on  to  access  the 
link.  "E-Mail  Address  to 
link  to"  is  where  you  want 
the  e-mail  sent.  You  can 
also  specify  a  default  sub- 
ject for  the  e-mail.  All  e- 
mail  received  from  this 
link  will  have  this  subject. 

Text  entered  in  the  Status  Window  Message  will  be  displayed  at 
the  bottom  of  a  browser  in  the  status  area. 


E-Mail  Address  to  link  to:  (For  Example:  YourWeme^VoijrD  ornain.com) 


::r,n- ■  i'abt-inCcQm 


Subject  (cipaonaJ):     Information  needed 


5tatEJS  Window  Message: 
|  C  Show  Status  Wridow  Message  On  MouseOver 


Cool      |  |    No  Wisy!  | 


Inserting  an  e-mail  link  into  your  page 


Always  remember  that  the  inserted  text,  image,  link  or  e-mail 
will  appear  at  the  current  location  of  the  cursor,  and  you  can 
always  change  this  later.  Finally,  click  on  the  Preview  tab  to  see 
how  the  Web  page  will  appear  in  a  browser. 
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5.2  Microsoft  Publisher 


Microsoft  Office  Publisher  is  a  basic  Web  design  and  print  layout 
design  software  bundled  with  the  Microsoft  Office  suite.  You  can 
access  it  from  Start  >  All  Programs  >  Microsoft  Office  >  Microsoft 
Office  Publisher.  This  is  a  simple  tool,  but  contains  extensive  tem- 
plates to  make  the  e-mail  /  Web  design  easy.  Just  use  the  Wizard 
and  chose  from  the  various  options  at  every  stage,  and  your  site  is 
ready  to  roll! 


When  you  open  Publisher  for  the  first  time  or  when  you  click 
on  New  Project,  you  will  be  presented  with  options  for  what  you 
wish  to  do.  For  Web  design,  choose  Web  Sites  and  Design.  Once  you 
select  the  Web  Sites  and  Design  option,  you  are  immediately  pre- 
sented with  an  expanse  of  templates  to  the  right  of  the  screen. 
These  templates  are  categorised  as  Easy  Web  Site  Builder,  3  Page 
Web  Site,  Product  Sales  and  Professional  Services.  These  templates 
can,  of  course,  be  used  for  any  content— they  are  templates  after  all. 





Selecting  the  design  type  and  templates  in  MS  Publisher 


Once  you  select  the  template  of  your  choice  by  clicking  on  it, 
Publisher  opens  it  up  for  you  to  edit  it  and  add  the  required  text. 
Depending  on  the  template  you  have  chosen,  standard  Web  site 
links  such  as  Home,  About  Us,  Contact  Us,  etc.  will  be  available.  You 
can  change  the  wording  of  these  links  and  add  the  text  for  each  sec- 
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The  drawing  toolbar 

tion.  Images  in  the  template  can  be  changed  by  right-clicking  on 
them  and  selecting  Change  Image  >  From  File.  There  is  an  option  to 
add  a  caption  to  the  images  right  below  each  of  them. 


At  the  bottom  of 
the  Publisher  win- 
dow you  will  see  the 
pages  being  num- 


I*  I  1  I  Z  I  3  I  4  I  5  16  I  J  I  »  I  9  I  mi  "I  "I  131  "I  15| 

Select  the  section  or  page  number  to  edit  its  contents 


bered.  To  edit  the 
different  parts  (rather,  the  links— such  as  Home  or  About  Us)  of  the 
Web  page,  just  click  on  the  numbers  at  the  bottom.  Each  of  those 
numbers  takes  you  to  a  "part"  or  section  of  the  site.  Standard  ele- 
ments such  as  the  logo,  company  name,  etc.,  will  remain  the  same 
throughout  the  different  sections. 

You  can  move  the  text  boxes  and  images  around  the  page  to 
suit  your  liking.  There  is  also  a  vertical  and  horizontal  ruler  which 
you  can  use  if  you  are  looking  to  align  different  elements.  The 
scale  is  graduated  in  terms  of  resolution  rather  than  physical 
dimensions,  so  you  can  design  your  site  according  to  the  target  res- 
olution. Right-clicking  or  double-clicking  on  a  bullet  or  image 
gives  you  the  Format  Autoshape  option,  using  which  you  can 
change  its  colour.  This  works  similar  to  the  Format  Autoshape 
option  in  Microsoft  Word  or  PowerPoint. 

To  attain  even  more  customisation,  you  can  add  your  own  draw- 
ings using  the  Line,  Rectangle,  Oval  or  Arrow  shape  tools  and  add  your 
own  text  using  the  Text  Box,  which  are  available  through  the  Objects 
box.  If  this  box  is  not  visible,  click  on  View  >  Toolbars  and  select  the 
Objects  box  to  have  it  displayed.  If  you  wish  to  represent  data  through 
tables,  just  "draw"  a  table  anywhere  on  the  page.  In  the  Task  Pane  at 
the  left  of  the  page  you  are  designing,  you  will  see  even  more  tem- 
platised  options  for  Font  and  Colour  Schemes.  If  none  of  the  options 
are  to  your  liking,  you  can  select  the  ones  that  are  closest  to  your  pref- 
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erence,  and  then  customise  them.  Under  Publication 
Designs  in  the  Task  Pane,  the  different  designs  avail- 
able give  you  different  backgrounds  and  layouts, 
which,  again,  are  customisable! 


Under  Web  site  options,  you  select  the  orien- 
tation of  your  navigation  links  (links  to  different 
sections  of  your  Web  site).  It  is  standard  to  place 
the  links  to  Home,  About  Us,  etc.,  vertically, 
though  some  designers  place  it  horizontally  at 
the  top.  But  placing  it  at  the  bottom  is  a  no-no 
unless  you  are  daring  to  be  different.  It  makes 
most  sense  to  keep  the  links  where  they  are  easily  visible. 

You  can  preview  your  design  at  any  time  by  clicking  on 
"Preview  your  Web  site"  in  the  task  pane.  Save  the  file  by  going  to 
File  >  Save  As  and  choosing  "Web  page".  The  extension  will  be  .htm 
(if  you  wish  to  edit  this  file  with  Publisher  at  a  later  time,  save  it 
as  "Publisher  File").  When  you  save  your  Web  page  as  a  .htm  file,  a 
folder  is  created,  which  contains  the  images  and  other  non-text 
elements.  Just  upload  this  folder  to  the  same  directory  (not  a  sub 
directory)  as  the  .htm  file,  and  your  Web  site  is  ready! 

5.3  Serif  WebPlus  6.0 


Serif  WebPlus  6.0  is  another 
easy-to-use  code  editor,  and  it 
comes  free.  It  has  many  fea- 
tures worth  mentioning.  You 
can  open  multiple  publica- 
tions at  a  time,  and  even  tile 
them  and  drag-and-drop 
objects  between  them.  You 
can  choose  from  dozens  of  The  Serif  WebPlus  6.0  main  window 
preset   colour   schemes  to 

change  the  overall  appearance  of  your  page  with  a  single  click. 


a 

A  web  ace  □pooms 
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navigation  bar  
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The  Task  Pane 
funtions  and 
navigation 
options 


HEE  FAST  TRACK 


81 


V 


SITE  DESIGN  TOOLS 


WEB  DESIGN 


There  is  a  host  of  inbuilt  logos,  Flash  animations,  text  effects,  and 
other  special  effects  that  you  can  drag-and-drop  onto  your  page  as 
it  suits  your  needs. 

The  various  panels  provide  rapid  and  easy  visual  access  to 
commonly  used  controls  such  as  fonts,  line  settings,  the  colour 
table,  etc.  There  are  27  graphics  shapes  including  stars,  triangle, 
arrows,  polygons,  and  callouts  to  add  fun  and  meaning  to  your 
Web  site.  The  Table  Editor  lets  you  create  sophisticated,  colourful 
tables,  which  can  include  formatted  text  and  spreadsheet  formu- 
las. The  Calendar  Wizard  allows  you  to  create  a  calendar  with  a 
choice  of  sizes  and  design  options.  In  addition  to  all  this,  there 
is  a  collection  of  20,000  assorted  Web-ready  graphics,  including 
animations,  pictures  and  page  elements. 

5.3.1  An  example  of  how  to  create  a  Web  page 

When  you  launch  WebPlus,  the  WebPlus  Startup  Wizard  will 
launch.  It  presents  you  with  five  choices. 

o  Use  a  Page  Wizard,  to  create  an  instant  publication 

o  Start  from  Scratch,  to  get  a  blank  page  to  work  on 

o  Open  a  publication,  to  edit  your  own  WebPlus  files 

o  View  a  QuickTour,  to  see  the  menu  of  introductory  tutorials 

o  Online  Resources,  to  access  the  Serif  and  VisualCities  Web  sites 

To  start  creating  your  own  Web  page,  you  need  to  click  on  Page 
Wizard.  This  will  launch  as  a  Startup  Wizard  window.  Select  a  Web 
category  on  the  left  and  exam- 
ine the  samples  on  the  right. 
Click  on  a  sample  that  suits  your 
needs  and  click  on  Next.  The 
Wizard  now  leads  you  through  a 
series  of  steps  that  let  you  see 
the  publication  being  assem- 
bled. We  chose  the  "Other"  cate- 
gory and  "Generic  02"  from  the 
samples.  Click  on  Finish. 
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In  the  next  window  that 
opens,  you  will  be  able  to  see  a 
preview  of  your  Web  page.  You 
can  enter  your  name,  the  name 
of  your  company,  and  the  com- 
pany slogan.  Click  on  Next  to 
go  to  a  page  where  you  can 
enter  your  address.  Then,  click 

Next.  You  can  now  enter  your    Enter  your  address  and  other  detaMs 
contact  details.  These  include 

your  telephone,  mobile  and  fax  number  as  well  as  your  e-mail 
address  and  the  URL  of  your  site.  Click  Next. 


On  the  following  page,  you 

can  enter  the  titles  for  various 

pages  such  as  the  home  page, 

information  page,  service  page 

and  contact  page.  Click  Next  to 

go  to  the  final  page  of  the 

Wizard,  where  you  can  choose 

a  suitable  colour  scheme  for 

,.  ,    .  .  ,  Enter  your  name,  company  name 

your  page.  Click  Finish.  and  s|ogan 

On  the  right  side  of  the  WebPlus  window,  you'll  see  a  set  of 
panels  known  as  the  Studio  toolbar.  It  is  a  cluster  of  seven  special- 
purpose  panels. 

1.  The  Color  panel  lets  you  apply  color  and/or  shading  to  an  object. 

2.  The  Color  Scheme  panel  displays  a  list  of  available  colour 
schemes  that  lets  you  instantly  revise  colours  in  a  Page  Wizard 
publication.  You  can  apply  a  colour  scheme  to  new  elements, 
customise  scheme  colours,  or  even  create  entirely  new  schemes. 

3.  The  Text  panel  provides  a  visual  preview  of  different  font  and 
text  styles,  and  also  allows  you  to  change  the  style  and  font  of 
text  objects. 

4.  The  Lines  panel  allows  you  to  set  the  weight  and  type  of  lines 
and  shapes. 
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5.  The  Gallery  includes  a  wide  variety  of  pre-designed  elements- 
graphics  you  can  drag  and  drop. 

6.  The  Portfolio  is  a  container  for  storing  design  objects  (pictures, 
text  blocks,  and  even  unlinked  text  frames)  you'd  like  to  reuse 
in  different  publications. 

7.  The  Wizard  panel  lets  you  edit  Gallery  objects  or  revisit  the  choic- 
es you  made  when  creating  a  publication  using  a  Page  Wizard. 

When  you  are  done  creating  the  page,  click  on  File  >  Publish 
Site,  and  then  select  "To  Disk  Folder"  to  save  it  to  your  hard  drive. 

5.4  Macromedia  Dreamweaver  8 


This  is  a  state-of-the-art  software  that  lets  you  easily,  quickly  and 
efficiently  design  a  Web  site  of  your  own.  Dreamweaver  lets  you  do 
both  hand-coding  HTML  if  you  are  a  coder,  or  work  in  a  visual  edit- 
ing environment.  The  visual  editing  feature  is  especially  useful 
and  easy  for  novices  who  know  nothing  about  coding.  It  lets  you 
create  Web  pages  without  writing  a  single  line  of  code.  You  can 
view  all  your  site  elements  or  assets  and  drag  them  from  a  panel 
directly  into  the  document. 

Dreamweaver  provides  you  a  full-featured  coding  environment 
including  code-editing  tools  (such  as  code  colouring,  tag  comple- 
tion, a  coding  toolbar,  and  code  collapse)  and  language  reference 
material  on  CSS,  JavaScript,  ColdFusion  Markup  Language  (CFML), 
and  other  languages.  You  can  also  import  your  hand-coded  HTML 
documents  without  reformatting  the  code.  You  can  later  reformat 
the  code  with  your  preferred  formatting  style. 

In  addition  to  the  above,  Dreamweaver  also  lets  you  build 
dynamic,  database-driven  Web  applications  using  server  technolo- 
gies such  as  CFML,  ASP.NET,  ASP,  JSP,  and  PHP.  If  you  prefer  to  work 
with  XML  data,  Dreamweaver  provides  tools  that  allow  you  to  eas- 
ily create  XSLT  pages,  attach  XML  files,  and  display  XML  data  on 
your  Web  pages. 
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5.4.1  Getting  started  with 
Dreamweaver 


Launch  Dreamweaver.  If 
you're  launching  it  for  the 
first  time,  you  will  be  able  to 


Getting  started  with  Dreamweaver 


view  the  start  page.  You  can 
choose  a  type  of  document 
from  here.  Here  you  can  open 
a  new  document,  create  a 
new  document  from  amongst 


the  various  types,  or  choose  a  sample  design  upon  which  you  can 
build  your  own  Web  page. 

If  you  want  more  control  and  want  to  customise  the  type  of 
Web  page  you  wish  to  design,  you  need  to  go  to  File  >  New.  You  will 
view  a  New  Document  dialog  box  as  shown  in  the  screenshot.  The 
various  categories  of  Dreamweaver  documents  appear  in  a  list  to 
the  left.  Select  one  of  them,  and  the  specific  document  types  with 
their  icons  will  fill  the  list  to  the  right. 

The  following  are  the  types  of  Web  pages  you  can  choose  from. 

o  Basic  page:  Standard  client-side  document  types,  such  as  HTML, 
ActionScript,  CSS,  JavaScript,  and  XML 

o  Dynamic  page:  Standard  server-side  document  types,  such  as 
ASP,  ASP.NET,  ColdFusion,  JSP,  and  PHP 

o  Template  page:  Blank  Dreamweaver  document  templates  for  stat- 
ic and  dynamic  sites 

o  Other:  Specialised  client-side  document  types,  such  as  Java, 
WML,  C#,  VB,  VBScript,  and  plain  text 

o  CSS  Style  Sheets:  Predesigned  stylesheets 

o  Framesets:  Predesigned  framesets 

oPage  Designs  (CSS):  Predesigned  layouts  using  CSS  layers 
o  Starter  Pages:  Predesigned  layouts  with  images 
oPage  Designs:  Pre-designed  layouts  using  tables 

Let's  start  with  the  Basic  page.  To  create  a  standard  client-side- 
only  Web  page,  you  can  select  Basic  page  from  the  list.  Then,  from 
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Choose  the  type  of  document 


the  Basic  page  list,  select  HTML. 
Click  Create,  and  Dreamweaver 
opens  up  a  blank  Web  page. 
Don't  do  anything  as  yet;  first 
save  this  file.  This  is  because 
the     HTML     generated  by 
Dreamweaver  is  cleaner  when 
it  is  working  with  saved  docu- 
ments as  opposed  to  unsaved 
documents.  Choose  index.html 
as  the  filename  because 
this  is  the  default  name 
of  the  home  page  of 
your  site,  that  is,  this 
page  will  load  automati- 
cally when   a  visitor 
types  your  URL  in  the 
address  field  of  the  Web 
browser.  Save  this  file  in 
your  local  root  folder. 
Do  not  put  it  in  any  of 

the  subfolders,  because    A  new  Web  page  document  in  Dreamweaver 
this  is  your  home  page 
and  it  should  be  at  the  top  of  the  structure. 


WE- 


5.4.2  Defining  the  site 

You  need  to  create  a  site  where  you  can  store  all  the  files  you 
would  like  to  be  on  your  Web  site.  To  do  this,  click  on  Site  menu 
and  then  on  New.  A  site  definition  Wizard  will  open  where  you 
can  enter  the  details  such  as  the  name  of  your  Web  site  and  its 
HTTP  address  or  URL.  Click  Next. 


In  the  dialog  box  that  comes  up,  you're  asked  whether  you 
wish  to  work  with  a  server  technology  such  as  ColdFusion, 
ASP.NET,  PHP,  etc.  You  can  choose  No  and  click  Next.  You  will  now 
be  asked  where  you  wish  to  save  and  edit  all  the  files.  Choose  a 
local  path  for  this  and  click  Next. 
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In  the  next  dialog 
box,  you  are  asked  how 
you  connect  to  the  serv- 
er. Since  you  may  not 
have  Web  space  regis- 
tered for  this  purpose, 
you  can  choose  None  and 
click  Next.  Now  click 
Done,  and  your  site  is 
locally  created.  You  can 
always  change  these 
parameters  later. 


a  cctecDon  of  ftes  and  Fetters  that  corresponds  t  d 
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The  site  definition  window 

5.4.3  Different  views  in 
Dreamweaver 

You  can  view  a  document  in  three  different  ways  in  Dreamweaver. 


Design  view 

In  this  view,  Dreamweaver 
displays  your  Web  page  in  a 
manner  similar  to  the  way 
that  the  page  appears  in  a 
Web  browser.  You  can  use 
Design  view  to  construct  your 
page  visually,  but  you  should 
not  rely  on  it  for  a  completely 
accurate  representation 
of  your  page.  It's  more  p 
like  a  reliable  estimate. 
The  best  way  to  see  how 
your  page  actually  looks 
is  to  actually  test  it  in 
your  preview  browsers. 

Code  view 

In  Code  view,  Dre- 
amweaver displays  the 


The  Design  View  of  the  Web  page 


'The  Code  View  of  the  Web  page 
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underlying  code  (e.g.,  HTML,  CSS,  JavaScript)  of  your  Web  page. 
Code  view  works  like  a  text  editor.  You  can  directly  edit  and  mod- 
ify the  code. 


Split  view  (Code  and  Design  view): 
In  this  view,  the  document 
window  is  divided  into  two 
frames.  The  top  frame  shows 
the  underlying  code  of  the 
page,  and  the  bottom  frame 
gives  the  visual  representa- 
tion. This  is  great  if  you  are 
learning  HTML.  You  can  draw 
the  layout  of  your  page  and 
add  content  in  the  visual 


The  Split  View  of  the  Web  page 


frame  and  then  click  in  the  code  frame  to  see  what's  happening 
behind  the  scenes.  Alternatively,  you  can  type  HTML  directly  into 
the  code  frame  and  then  click  in  the  visual  frame  to  see  the  results. 


You  can  switch  between  these  views  by  pressing  Control  +  ["  ]. 
5.4.4  Setting  up  Page  Properties 

Next,  you  need  to  set  up  a  few  basic  properties  of  the  page.  Go  to 
the  main  menu  and  choose  Modify  Page  Properties.  The  Page 
Properties  dialog  box  will  appear.  Most  of  the  categories  on  the  left 
side  of  the  Page  Properties  dialog  box  don't  apply  just  yet.  For  now, 
you  can  set  the  most  basic  appearance  attributes  of  the  page,  so 
let's  start  with  the  margins. 


When  a  Web  browser  dis- 
plays a  Web  page,  it  automati- 
cally adds  a  small  amount  of 
padding  between  the  page 
content  and  the  browser  win- 
dow. This  can  lead  to  undesir- 
able and  unexpected  results 
when  viewed   in  different 
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browsers,  because  different  browsers  add  different  amounts  of 
this  whitespace.  It  is  therefore  good  to  remove  the  browser's 
default  page  margin  entirely  so  that  the  page  fits  snugly  in  the 
browser  window. 


To  remove  the  browser's  default  page  margins,  click  on  Modify 
menu  and  on  Page  Properties.  Now  click  the  Appearance  category 
on  the  left  side  of  the  Page  Properties  dialog  box.  Navigate  to  the 
margin  section  and  set  the  Left  Margin  field  to  "0",  and  choose 
"pixels"  as  your  unit  of  measurement.  Do  the  same  for  the  other 
three  margins  as  well. 


The  title  of  a  Web  page 
appears  in  the  title  bar  along 
the  top  of  the  browser  win- 
dow. It  does  not  appear  any- 
where on  the  page  itself.  You 
don't  add  this  information  so 
much  for  the  sake  of  your 
design  as  you  do  for  the  sake 
of  good  coding  practice.  Type 
the  name  of  your  Web  site  in  the  Title  field.  Use  the  same  name 
you  provided  in  the  Site  Definition  dialog  box.  As  you  create  new 
pages  for  your  site,  you  can  customise  this  title  to  reflect  the  con- 
tent of  the  page. 
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Setting  the  title  and  document  type 


Finally,  you  can  attach  a 
tracing  image  to  the  back- 
ground of  the  document  win- 
dow. Tracing  Image  specifies 
an  image  to  use  as  a  guide  for 
copying  a  design.  This  image 
is  for  reference  only,  and  does 
not  appear  when  the  docu- 
ment is  displayed  in  a  brows- 
er. You  can  set  the  opacity  of  tl 
properties,  click  OK  to  exit. 
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Setting  up  the  tracing  image 

s  image.  After  you  have  set  all  the 


EMI  FAST  TRACK 


89 


V 


SITE  DESIGN  TOOLS 


WEB  DESIGN 


5.4.5  Preview  your  page  in  a  browser 

When  you  are  done  creating  your  page,  you  need  to  preview  it  in 
a  Web  browser.  This  is  necessary  to  check  if  the  page  appears  the 
same  in  all  the  browsers  (which  is  not  always  the  case). 

To  view  the  page  you  created,  press  [F12],  and  Dreamweaver 
will  launch  the  page  in  your  primary  browser.  To  launch  it  in  your 
secondary  browser  (if  installed),  you  need  to  press  [Ctrl]  +  [F12].  If 
you  have  more  browsers  installed  and  wish  to  preview  the  page  in 
those  browsers,  you  need  to  click  on  the  "Preview/Debug  In 
Browser"  icon  along  the  top  of  the  document  window,  and  select 
the  appropriate  browser  from  the  drop-down  list.  If  your  browser 
is  not  in  this  list,  you  can  add  it  by  clicking  on  "Edit  Browser  List" 
at  the  bottom  of  the  drop-down  list.  Check  things  such  as  whether 
the  title  appears  in  the  title  bar,  whether  the  images  and  text  are 
where  they  are  supposed  to  appear,  and  whether  the  tracing 
image  is  visible  (it  should  not  be). 
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Microsoft 
FrontPage 


When  it  comes  to  Web  design,  there's  one  program  that's  very 
popular  and  easy  to  use— Microsoft  FrontPage.  This  tool  is  part 
of  most  MS  Office  installations,  and  as  a  result,  is  one  of  the  most 
used  software  for  Web  design.  It's  simple,  makes  for  a  decent  design 
tool,  has  loads  of  templates— and  gets  the  job  done  in  no  time! 
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7.1  Getting  Started 


If  you  are  used  to  working  with  any  Microsoft  Office  application, 
you  will  feel  right  at  home  with  FrontPage.  Throughout  this 
chapter  we  will  use  FrontPage  2003,  but  you  should  have  no  prob- 
lems following  the  workshops  no  matter  what  version  of 
FrontPage  you  have. 

To  check  if  you  have  FrontPage  already  installed  on  your  com- 
puter, go  to  Start  >  Programs  >  Microsoft  Office  and  look  for 
"Microsoft  Office  FrontPage  2003."  If  you  don't  see  it  there  you  will 
have  to  buy  a  version  of  office  that  comes  with  FrontPage,  or  just 
buy  FrontPage  2003  all  by  itself  from  www.microsoft.com 
/office/frontpage/howtobuy/default.mspx.  This  will  cost  you  $199 
(Rs  9,000),  so  it  isn't  cheap— but  it  might  just  be  worth  it  if  you  plan 
to  do  a  lot  of  design  for  your  site. 

Of  course,  you  can  always  opt  for  a  freeware  tool  similar  to 
FrontPage  in  functionality.  We  will  tell  you  about  some  free  tools 
later,  but  everything  you  read  in  the  workshops  that  follow  will  be 
quite  similar  in  the  free  HTML  editors. 

Note:  If  you  have  some  prior  experience  in  creating  basic  Web  pages 
using  FrontPage  or  any  other  HTML  editor,  please  skip  directly  to  section 
7.4.  Sections  7.2  and  7.3  are  only  for  absolute  beginners. 
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7.2  The  Look 


Start  up  FrontPage  and 
take  a  look  at  the  layout  of 
all  the  tools  and  menus. 
Like  we  said  before,  if 
you've  used  any  other  MS 
Office  applications,  you 
will  find  FrontPage  really 
easy  to  use. 

FrontPage  will  start 
with  a  blank  page  by 
default,  and  if  all  you're 
going  to  do  is  build  a  sin- 
gle page  for  yourself,  you  can  start  right  away.  However,  the  power 
of  FrontPage  lies  in  the  number  of  templates  and  presets  it  offers 
you,  so  you  don't  have  to  learn  everything  from  scratch. 

Let's  first  look  at  the  layout  of  the  software.  Starting  on  the  top 
left,  you  will  see  the  standard  toolbar  that  all  of  us  Windows  users 
have  become  accustomed  to.  The  familiar  File,  Edit,  View  and 
other  menus  are  there,  along  with  the  regular  text  formatting 
tools  from  MS  Word. 
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The  FrontPage  tool  and  menus 


Next,  you  will  notice  that  the  page  below  is  broken  into  two 
panes— the  top  one  will  have  code  in  it  and  the  bottom  will  be 
blank.  This  is  the  Split  view  that  has  made  FrontPage  so  popular, 
and  is  now  a  standard  way  of  creating  HTML  Web  pages  in  most 
Web  design  software.  The  bottom  pane  lets  you  design  and  format 
your  Web  site  in  a  WYSIWYG  environment.  Don't  worry,  that  large 
acronym  doesn't  mean  anything  absurdly  technical— it  just  stands 
for  "what  you  see  is  what  you  get." 
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FrontPage  looks  similar  to  most  other  MS 
Office  applications,  so  you  should  feel  right 
at  home 
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□  Design  [B  Split  |®  Code  Q  Preview  |  <  | 


Most  people  use  the 
Split  view  so  as  to  be  able 
to  change  code  as  and 
when  they  want  to  and  do 
the  rest  of  the  design  in 

the  bottom  WYSIWYG  pane,  or  as  FrontPage  calls  it,  the  Design 


Switch  views  by  clicking  on  the  appropriate 
tab  on  the  bottom  left 


■ 

FrontPage  has  a  few  niggles, 
the  most  irritating  of  which  is 
its  tendency  to  add  complete 
paths  to  every  element  in  your 
page.  For  example,  when  you 
add  pictures  to  your  page,  they 
get  added  with  a  local  path 
rather  than  a  relative  path. 

This  means  that  when  you 
add  a  picture,  it  gets  added 
with  a  source  tag  (src=)  of 
something  like  src="file:///C:/Documents  %20and%20Settings 
/Administrator/My%20Documents/pic.jpg"  rather  than  src="/pic.jpg". 
The  difference  between  these  two  paths  is  this:  the  first  means  that 
your  HTML  site  will  only  display  images  if  viewed  on  your  own  com- 
puter, while  the  second  will  work  on  any  computer.  If  you  upload  this 
site  or  page  to  a  Web  server  with  the  paths  that  FrontPage  provides, 
the  page  will  point  the  browser  of  any  visitor  to  a  picture  called 
"pic.jpg"  that  is  located  in  the  folder  "C:\Documents  and 
Settings\Administrator\My  DocumentsV  on  the  visitor's  computer. 
Now  when  you  check  your  site,  you  will  find  that  everything  is  in  order, 
but  when  your  site  is  accessed  from  any  computer  but  yours,  all  any- 
one sees  is  a  little  symbol  for  a  missing  image  (generally  a  little  white 
box  with  a  red  cross).  If  you  provide  a  relative  path  such  as 
src="pic.jpg",  and  upload  both  "pic.jpg"  and  the  HTML  file  you  created 
to  the  same  folder  on  the  Web  server,  everyone  sees  your  site  the  way 
you  designed  it. 


Same  Hi 


FrontPage  can  make  you  tear  your  hair 
out  at  times,  especially  when  it  adds 
complete  paths 
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pane.  If  you  know  nothing  of  HTML,  and  aren't  really  too  inter- 
ested in  learning  it,  you  can  switch  to  the  Design  view  by  click- 
ing on  the  Design  tab  at  the  bottom  left  of  your  screen.  However, 
we  suggest  you  always  use  the  Split  view,  for  two  reasons:  first,  if 
you  make  your  pages  in  the  Design  pane,  you  can  see  the  HTML 
code  that  relates  to  it  in  the  Code  pane,  and  thus  learn  basic 
HTML  without  having  to  cough  up  thousands  of  Rupees  for 
course  fees!  Secondly,  like  any  other  software,  FrontPage  can  be 
quite  stubborn  at  times,  and  you  might  need  to  dabble  with  code 
on  and  off  to  fix  some  niggling  problems.  See  the  box  Irritations 
for  more  information. 

7.3  Your  First  Web  Page 


Let's  start  off  by  creating  a  sin- 
gle, simple  HTML  page.  Since 
you  already  see  a  blank  page 
when  you  open  FrontPage,  you 
can  start  typing  in  the  Design  Change  the  Title  tag  of  your  page 
pane,  and  then  format  your 

page  the  way  you  want  it.  However,  before  you  start  typing  con- 
tent, take  a  look  at  the  Code  pane  and  look  for  the  <title>  and 
</title>  tags.  You  should  find  something  like  "New  Page  1"  in 
between  these  tags.  This  is  the  title  of  your  page,  or  the  text  that 
will  appear  at  the  top  of  your  browser  when  you  open  this  page. 
Change  this  to  something  descriptive  of  the  page  you  are  making, 
or  name  it  after  your  site. 

7.3.1  The  content 

You  can  now  begin  typing  in  your  content  and  start  to  format  it. 
You  need  to  make  sure  your  page  has  a  headline,  some  content,  a 
picture  or  two,  and  some  links.  The  most  basic  page  is  a  personal 
page  that  you  can  create  by  just  typing  out  your  name,  your  inter- 
ests, add  a  picture  of  yourself,  and  then  make  a  link  for  people  to 
e-mail  you— or  just  add  links  to  your  favourite  sites. 
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When  you  type  in  your  headline,  just  go 
to  the  Formatting  toolbar  and  change  the 
Normal  style  to  Heading  1.  This  will  format 
the  selected  text  into  a  headline,  making  it 
larger  in  point  size,  and  bold  as  well.  If  you 


want  to  change  the  colour  of  the  text  dis-    Thumb  Font  Color 
played,  just  click  on  the  Font  Color  icon 
and  choose  the  colour  you  want. 


7.3.2  Inserting  images 

The  next  step  is  to  insert  a  couple  of  images.  Before  you  go  any  fur- 
ther, save  the  HTML  file  with  any  name  you  like,  and  in  a  folder 
that  you  can  easily  access— such  as  a  folder  on  the  Desktop  called 
"Site".  Now,  you  have  to  decide  how  you  want  sort  your  images.  It's 
easy  to  just  plonk  everything  into  one  folder  and  then  forget  about 
local  and  relative  paths,  but  it's 
a  nightmare  to  manage  as  and 
when  you  add  pages  and 
images  to  your  site.  The  easiest 
and  most  widely  used  conven- 
tion is  to  place  images  in  a  fold- 
er called,  umm,  "images"!  It's 
not  very  creative,  but  extreme- 
ly practical. 
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Inserting  a  picture  into  your  page 


If  you  choose  to  save  all  pictures  on  your  Web  server  in  a  fold- 
er called  "images",  do  the  same  when  designing  it  locally,  and  cre- 
ate a  folder  called  "images"  in  the  same  folder  as  your  HTML  file. 
Here,  paste  all  the  images  you  think  you  will  be  using  for  this  fist 
page  of  yours. 

Now,  to  insert  an  image,  just  go  to  Insert  >  Picture  >  From  File..., 
choose  the  picture  you  want  to  insert,  and  click  OK.  The  picture  will 
appear  on  your  page  in  its  original  size.  If  it's  too  large,  just  click  on 
the  picture,  hold  down  [Ctrl]  +  [Alt]  +  [Shift]  and  drag  a  corner  of  the 
picture  to  make  it  a  more  desirable  size. 
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7.3.3  Adding  links 

The  next  thing  you  may  want  to  do  is  add  a  few  links  to  your 
Web  page,  because  you  want  people  to  be  able  to  click  on  some- 
thing other  than  the  back  or  close  button  to  navigate  away  from 
your  page!  It's  always  a  good  idea  to  add  your  favourite  links  to 
your  site.  There  are  two  ways  to  add  links  in  sites:  either  you  just 
type  out  the  link,  such  as  http://www.thinkdigit.com,  which 
FrontPage  (like  any  other  MS  Office  program)  automatically  con- 
verts to  a  link,  or  you  use  the  hyperlink  option— also  called  the  <a> 
tag  in  HTML  code. 


Since  it  looks  a  lot  better  to 
have  a  link  called  ThinkDigit 
rather  than  http://www.  think 
digit.com/,  in  the  text  of  your 
page,  we'll  always  use 
FrontPage's  Hyperlink  feature 
to  add  links.  In  the  example 
page  that  we're  showing  you 
screenshots  of,  we  typed  out 
"Here's  a  uuLinkuu  to 
uuDigituu".  As  you  can  see,  the 
words  "Link"  and  "Digit"  are 
underlined.  When  you  add 
links,  you  will  notice  that  they 
turn  blue,  so  as  to  distinguish 
between  regular  text  and  links. 
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Insert  hyperlinks  into  your  pages  to 
point  to  different  Web  sites,  another 
page  in  your  own  site  or  even  your 
e-mail  address 


All  you  have  to  do  is  select  the  word(s)  you  want  to  change  into 
a  link  and  then  go  to  Insert  >  Hyperlink...,  or  simply  press  [Ctrl]  + 
[K].  This  will  bring  up  the  "Edit  Hyperlink"  box,  where  you  just  type 
in  the  Web  address  and  click  OK. 

As  you  will  see  in  the  Edit  Hyperlink  dialog  box,  you  have  sev- 
eral options  available  to  you.  On  the  left  you  will  see: 
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Cerent  frames  page 


Page  Default  fnona) 
S-sme  Frame 
Whole  Page 

Parer-  rVcVie 


]_blank 

r  5st  a*  paQ"  defaufc 


3  Existing  File  or  Web  Page:  With 

this  option  you  can  just  type  in 

the  URL  of  a  site,  or  a  link  to  a 

page,  file  or  image  that  will  be 

located  on  your  Web  server 

itself.  For  URLs,  you  will  need 

to  add  the  complete  address, 

including  the  "http://",  while 

for  pages  or  files  that  will  be 

located  on  your  Web  server, 

you  can  add  a  relative  path 

such  as  "/images/pic.jpg"  (if 

you  want  your  hyperlink  to 

point  to  a  file  called  "pic.jpg" 

located  in  a  folder  called 

"images"  relative  to  the  page  you  are  editing. 
Another  cool  function  is  accessible  from  the  Target  Frame- 
button  on  the  right  of  the  Edit  Hyperlink  dialog  box.  Click  this  and 
then  select  "New  Window"  if  you  want  your  visitors  to  be  taken  to 
the  link  without  browsing  away  from  your  site. 

o  Place  in  This  Document:  This  is  where  you  can  link  to  book- 
marks, which  we  will  explain  later  in  this  chapter. 


Use  the  Target  Frame  button  to 
choose  how  a  browser  opens  your 
hyperlink 


o  Create  New  Document:  Create  New  Document:  You  can  choose 
to  create  a  new  document  you  want  to  link  to,  but  haven't  made 
yet.  Let's  say  you  want  to  create  a  link  to  a  "Pictures"  page,  but 
haven't  started  designing  it  yet.  Using  the  Create  New  Document 
option  from  the  Edit  Hyperlink  dialog  box  will  allow  you  to  fix 
the  name  for  your  picture  page  right  now,  and  create  a  blank 
page  called,  say,  "pictures.html",  and  save  it  in  the  desired  loca- 
tion. The  advantage  is  that  later,  all  you  have  to  do  is  edit  the 
pages  you  want  to  link  to, 


rather  than  creating  them 
later  and  having  to  remeber 
what  you  linked  to  them  as.  If 
you  create  a  page  later  and 
call  it  "picture.html",  but 
linked  to  it  from  your  home 
page  (generally  index.html)  as 
"pictures.html",  you're  going 


Make  sure  you  use  the  Create  New 
Document  option  to  link  to  pages 
that  you  haven't  created  yet 
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to  have  a  lot  of  people  clicking  on  a  dead  link  and  getting  "Error 
404:  Page  not  found"  instead  of  your  Pictures  page. 

o  E-mail  Address:  This  option  allows  you  to  make  a  link  that,  when 
clicked,  will  open  the  visitor's  e-mail  editor  and  insert  your  e- 
mail  address  into  the  "To:"  field.  It's  like  a  shortcut  to  e-mailing 
you,  and  you  can  even  choose  the  default  subject  for  the  mail! 

You  can  also  make  your  pictures  link  to  URLs  instead  of  just  sit- 
ting there  on  your  page.  Doing  this  is  identical  to  how  you  link 
text,  except  that  you  have  to  click  on  the  picture  and  then  press 
[Ctrl]  +  [K]  to  get  to  the  Edit  Hyperlink  dialog. 

Once  you're  done  making  all  your  hyperlinks,  adding  all  your 
pictures  and  formatting  your  text,  remember  to  save  the  page 
before  closing  FrontPage.  Congratulations,  you've  just  made  your 
first  basic  Web  page! 

Read  on  to  find  out  how  to  do  a  little  more  with  FrontPage,  but 
remember  the  basics  we've  talked  about  in  this  section  because  we 
will  expect  you  to  know  how  to  do  everything  mentioned  here! 

7.4  Prettying  Up  Pages 


In  the  previous  two  sections,  we  learnt  the  absolute  basics  of  Web 
page  design  using  FrontPage.  Now  we  get  to  the  interesting  bit- 
using  FrontPage  to  design  a  Web  page  that  is  more  than  just  a 
white  background  with  basic  links,  pictures  and  text.  Here's 
where  you  get  to  show  off  your  individuality. 

7.4.1  Changing  colours 

Let's  start  with  customising  the  colours  of  your  page  and  the  text 
and  links  in  it. 

Many  people  prefer  light  text  on  dark  backgrounds,  rather 
than  the  standard  black  text  on  white  backgrounds.  Also,  you 
might  want  to  add  purple  text  on  an  ugly  yellow  background— just 
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Access  the  Page  Settings  to  change 
the  default  background  and  text 
colours  to  whatever  you  want 


because  you  want  it  that  way! 
Well,  here's  how  you  go  about 
changing  the  background 
colour  of  your  page:  right-click 
on  a  blank  part  of  your  page  in 
the  Design  pane  and  select  Page 
Properties...,  and  you  should  see 
the  Page  Properties  dialog  box 
pop  up.  Now,  click  on  the 
Formatting  tab,  and  under 
Colors,  you  will  see  five  drop-down  boxes:  Background,  Text, 
Hyperlink,  Visited  hyperlink  and  Active  Hyperlink.  Just  select  the 
colour  you  want  to  set  for  each  of  these  options  and  click  OK.  (A 
visited  hyperlink  is  a  link  that  a  visitor  has  already  clicked  on  and 
then  returned  to  your  page.  An  active  hyperlink  is  a  link  to  the 
very  page  that  a  visitor  is  at,  such  as  in  a  Links  box,  where  a  link 
to  every  page  in  your  site  is  displayed— including  the  current  page!) 


It's  usually  a  good  idea  to  leave  all  the  hyperlink  colours  at 
their  default,  and  not  setting  either  your  text  or  background 
colours  to  what  these  are  set  to  by  default— why  mess  with  Web 
conventions,  right? 

7.4.2  Picture  backgrounds 

Of  course,  you  don't  have  to  use  a  plain  background  to  adorn  your 
site,  and  you  can  use  a  picture  instead!  Go  back  to  the  Page 
Properties  dialog  box,  and  under  Formatting  check  the 
"Background  Picture"  and  the  "Make  it  a  watermark"  boxes.  Now 
click  on  Browse,  select  the  picture  you  want  to  use,  and  click  OK. 
You  should  now  see  the  path  and  name  of  the  picture.  Next  to  the 
Browse  button  that  you  clicked  earlier,  you  will  see  a  Properties 
button;  click  it  and  then  click  the  "Picture  File  Type..."  button  you 
see  in  the  next  box.  Here  you'll  have  options  to  change  the  image 
to  a  GIF,  JPG  or  PNG  file,  and  the  quality  settings  to  use.  Uncheck 
the  "Use  image  as  is"  box,  and  then  set  Quality  to  50  and 
Progressive  passes  to  2  if  the  image  is  larger  than  20  KB. 
Progressive  passes  indicates  how  a  browser  will  display  your 
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image,  so  if  a  visitor  with  low  bandwidth  visits  your  site,  he  or  she 
will  be  shown  a  very  low  quality  rendition  of  the  background 
image  immediately,  and  then  the  image  will  clear  up  as  it  is  com- 
pletely downloaded. 

In  the  same  Picture  File  Type  dialog,  you  will  see  the  difference 
in  file  size  of  the  image  as  you  reduce  the  quality  setting. 
Generally,  a  quality  of  60  per  cent  for  JPEG  images  is  quite  accept- 
able, and  can  reduce  file  size  by  as  much  as  10  times!  Thereafter, 
between  60  and  1  per  cent,  you  will  hardly  find  a  difference  in  file 
sizes,  but  will  see  a  dramatic  loss  in  quality  of  the  image.  We  rec- 
ommend always  using  60  per  cent  or  more  as  the  Quality  setting. 

Now  click  OK  thrice  to  get  back  to  your  page.  You  will  see  the 
background  has  become  the  picture  you  selected.  Sure  beats  white 
or  black,  doesn't  it? 


7.4.3  Buttons 

Instead  of  boring  old  links, 
especially  when  you  link  to 
other  fixed  pages  of  your  site, 
you  can  add  buttons.  Though 
these  are  nothing  but  graphic 
links,  they're  a  lot  prettier  than 
plain  text.  They  are  generally 
small  as  file  size  goes,  and  if 
you  use  the  same  buttons 
throughout  your  site,  a  few  KB 
more  is  all  that  your  site's  file 
size  will  be. 
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Insert  buttons  into  your  page  to  give 
it  a  better  look 


FrontPage  has  a  lot  of  preset  buttons  for  you  to  choose  from,  and 
with  all  the  colour  combinations  possible.  In  order  to  add  a  button, 
you  need  to  be  set  with  two  things:  the  name  of  the  button  and  the 
page  to  which  it  links.  Let's  take  the  example  of  our  "pictures"  page 
we  mentioned  earlier,  and  create  a  button  for  it  on  our  test  page. 
Choose  the  place  in  your  page  where  you  want  to  insert  the  button 
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and  click  on  Insert  >  Interactive  Button.  You  will  see  the  Interactive 
Buttons  dialog  as  well  as  three  tabs:  Button,  Font  and  Image. 

You  will  see  a  long  list  of  button  styles,  and  an  interactive  pre- 
view where  you  can  see  how  the  button  behaves  when  you  hover 
your  mouse  over  it  and  how  it  looks  when  you  click  it.  You  add  the 
button  text  into  the  Text  field,  and  the  link  into  the  Link  field. 

You  can  click  on  the  Font  tab  and  edit  the  way  the  text  in  the 
button  behaves.  You  can  select  different  colours  of  text  for 
mouse  actions  (hover  or  click)  and  change  the  font  and  size  of 
the  text. 

Next,  click  on  the  Image  tab 
to  select  the  size  of  the  image 
and  how  it  behaves.  If  you  are 
using  a  picture  background, 
make  sure  to  select  the  "Make 
the  button  a  GIF  and  use  a  trans- 
parent background"  radio  but- 
ton. If  you're  using  a  fixed 
colour  background,  you  can 
choose  to  set  that  same  colour 
as  the  button's  background,  but 
it's  always  a  good  idea  to  use 
GIFs  with  transparent  back- 
grounds, in  case  you  decide  to 
change  the  background  colour 
of  the  page  later. 

In  case  you  want  to  add  more  buttons,  and  you've  considerably 
personalised  the  first  one,  it's  easier  to  copy  and  paste  the  one 
you've  made  and  then  just  edit  the  text  and  link  fields  instead  of 
personalising  them  all  one  by  one.  This  way,  your  page  or  site  will 
have  all  the  same  button  characteristics,  and  it  will  be  neat— with 
only  the  text  and  links  for  each  changing. 
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Set  the  Image  properties  for  your 
button 
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7.4.4  Layers 

Often,  you  will  see  sites  that 
have  blocks  of  content,  with  pic- 
tures and  images  running  side 
by  side.  By  default,  in  FrontPage, 
even  if  you  select  the  picture 
and  set  a  wrapping  style,  you 
will  not  get  any  control  of  the 
way  the  text  flows,  and  you  will 
have  to  use  [Enter]  or  [Shift]  + 
[Enter]  to  manually  wrap  the 
text,  as  you  can  see  in  the  image 
alongside. 


You  cannot  just  place  text  near  an 
image 


In  order  to  arrange  the  text 
better  and  utilise  all  the  blank 
space  that's  next  to  an  image, 
you  can  use  layers.  In  order  to 
add  a  layer,  go  to  Insert  >  Layer, 
and  you  will  see  a  box  called 
something  like  "Layer  1"  appear. 
Click  on  the  layer  name  to  select 
it  and  then  drag  and  place  it 
where  you  want  it.  You  can 
resize  it  to  fit  your  page  and 

then  type  the  same  text  you  wanted  into  that  layer.  As  you  will  see 
from  the  image,  the  text  looks  wrapped  and  much  neater  now. 


Insert  a  layer  and  position  it  in  your 
page 


This  layer  you  just  added  will  have  no  border,  and  will  just  look 
like  text  placed  alongside  the  picture.  However,  if  you  want  to 
clearly  demarcate  a  layer  and  make  it  look  like  a  box,  you  can  do 
so  from  Layer  Properties.  Just  right-click  on  the  layer  and  select 
Layer  Properties.  A  pane  on  the  right  called  Layers  will  open.  This 
will  show  you  all  the  layers  in  your  page,  and  you  can  edit  each 
one's  properties  by  selecting  it  and  then  clicking  on  Borders  and 
Shading...,  Positioning,  or  Behaviors,  which  are  links  at  the 
bottom  right. 
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If  you  click  on  Borders  and  Shading...  you  will  see  many 
options,  most  of  which  are  self-explanatory.  There  is  also  a  pre- 
view so  you  can  easily  figure  out  what  each  setting  does.  We 
chose  to  make  our  layer  an  Inset;  you  can  choose  whatever  suits 
your  taste. 

Next,  you  can  click  on  the  Shading  tab  and  choose  whether  to 
just  leave  the  layer  background  blank  (default)  or  whether  you 
want  to  change  the  background  colour,  or  even  add  a  background 
picture  to  it. 


If  you  want  to  use  text  wrap- 
ping, you  will  need  to  click  on  the 
Positioning  link  at  the  bottom 
right  and  then  select  which  style  of 
wrapping  you  need.  By  default,  it  is 
set  to  no  wrapping,  so  set  this  to 
how  you  want  this  layer  to  wrap 
around  the  page  content. 


Under  Behaviors,  you  can  set 
various  advanced  script  options, 
such  as  JavaScript  code  behaviours, 
handlers  such  as  mouse-over  and 
mouse  click,  setting  specific  browser  behaviours  and  more.  Once 
you're  comfortable  using  FrontPage,  you  can  come  back  here  and 
use  some  of  these  features. 

One  thing  you  might  have  noticed  is  that  when  you  visit  a  few 
pages  on  the  Net  using  browsers  other  than  Microsoft's  Internet 
Explorer  (IE),  you  are  redirected  to  a  page  that  says  your  browser  isn't 
supported.  Though  we  all  hate  these  warnings,  the  fact  is  that  sites 
created  in  FrontPage  are  best  viewed  in  IE.  So  when  testing  your  site, 
if  you  find  that  certain  things  do  not  work  with  other  browsers,  you 
can  set  a  layer  to  check  for  which  browser  is  being  used  and  then  for- 
ward it  to  a  page  that  tells  the  visitor  that  his  or  her  browser  is  not 
supported.  It's  a  very  basic  implementation,  but  it  works.  Just  go  to 
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Use  Positioning  to  select  the 
wrapping  style  for  your  layer 
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Behaviors,  click  on  Insert, 
and  select  Check  Browser. 
You  will  see  the  Check 
Browser  dialog  as  shown  in 
the  screenshot.  Here,  select 
the  actions  you  want,  such 
as  redirecting  to  an  error 
page  (which  you  should 
remember  to  create)  when  a 
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certain  browser  is  detected.    You  can  force  visitors  to  your  site  to  use  a 
Remember,  this  is  very  irri-    sPecific  browser 

tating,  so  unless  you  really  have  compatibility  problems  with  some 
browsers,  you  shouldn't  use  this  feature. 


7.4.5  Bookmarks 

Some  of  us  like  to  rant  and  rave— especially  on  our  Web  sites!  This 
can  lead  to  some  very  long  pages  indeed,  and  just  navigating  a  sin- 
gle page  might  require  a  lot  of  scrolling.  This  is  very  user-unfriend- 
ly, and  you  need  always  make  sure  your  pages  are  a  breeze  to  nav- 
igate—or else  you're  not  going  to  be  getting  many  visitors. 


This  is  where  bookmarks  come  in.  Just  as  you  would  mark  a 
book  with  little  tags,  denoting  where  particular  passages  are, 
you  can  mark  your  site  with  bookmarks  so  that  visitors  can 
directly  go  to  the  content  they  want  by  clicking  instead  of  simul- 
taneously scrolling  and  scanning  the  text. 


For  pages  with  a  lot  of 
content,  it's  a  good  idea  to 
add  bookmarks  to  every 
section  you've  made,  and 
add  links  to  those  book- 
marks as  high  up  on  the 
page  as  possible— prefer- 
ably so  that  the  links  are 
visible  without  a  visitor 
having  to  scroll  at  all! 


Here's  what  §7.3  in  this  chapter  looks  like  as 
a  Web  page 
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Let's  use  the  text  in  §7.3  as  an  example.  We  just  created  a  new 
file  and  pasted  §7.3  into  the  page.  Pages  online  can  contain  10 
times  or  more  content  than  what  we  will  show  you,  and  obvious- 
ly, are  an  even  bigger  pain  to  navigate. 

We  laid  out  §7.3  in  a  Web  page,  and  placed  images  with  wrap- 
ping, and  found  that  it  was  quite  a  scroll  to  get  to  the  bottom, 
especially  if  you're  at  a  resolution  of  800  x  600.  So  we  added  book- 
marks to  every  sub-section  and  added  links  to  each  sub-section  at 
the  top  of  the  page.  Here's  how  you  can  do  the  same  thing. 

First,  select  the  first  point  you  want  to  bookmark— which  in 
our  case  was  at  "7.3.1  The  Content".  Now  go  to  Insert  > 
Bookmark  ([Ctrl]  +  [G]),  and  give  the  bookmark  a  name.  Ours  was 
a  simple  "731". 

Now,  repeat  the  same  procedure  for  all  the  points  in  your  page 
you  want  to  bookmark,  and  you  now  have  the  tags  ready.  The  next 
step  is  to  use  these  tags  by  making  links— preferably  at  the  begin- 
ning of  the  page,  in  plain  view  of  a  visitor— and  then  hyperlinking 
them  to  the  corresponding  bookmark. 

As  you  can  see  in  the  image,  we  had  three  links  placed  at  the 
top  of  the  page  for  the  three  bookmarks.  Now,  click  on  the  Preview 
tab  at  the  bottom  left  and  check  to  see  how  the  links  work. 

Now  you've  sorted  out  how  to  get  visitors  to  quickly  click  on 
the  content  they  want  to  read  about,  but  what  happens  when 
they're  done  reading  and  want  to  see  the  rest  of  the  content  you 
listed  at  the  top  of  your  page?  This  is  where  the  "Back  to  Top"  link— 
which  you've  probably  seen  many  times  online— comes  in. 

Just  click  on  the  first  line  of  your  page,  press  [Ctrl]  +  [G],  and  call 
the  bookmark  "Top".  Now,  add  the  text  "Back  To  Top"  at  the  end  of 
the  content  associated  with  each  bookmark  you  added  before.  This 
will  help  visitors  get  back  to  the  list  with  ease  after  they're  done 
going  through  the  content  under  the  bookmark  they  clicked. 
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That  takes  care  of  all  the 
basic  things  you  need  to 
know  in  FrontPage.  Of 
course  there  are  hundreds 
of  more  options  and  fea- 
tures available,  but  those 
are  things  best  learnt  by  try- 
ing them  yourself! 


7.3  Your  Fiist  Web  Page 


The  bookmarked  and  linked  final  page  is  a 
lot  easier  to  navigate 


7.5  Templates 


So  far  we've  shown  you  enough  to  get  you  started  with  designing 
pages  individually.  Now  we'll  get  into  some  workshops  to  better 
understand  how  you  can  use  the  power  of  FrontPage's  templates 
and  preconfigured  settings  to  create  a  powerful  HTML-based  site. 

7.5.1  Web  site  templates 

If  you  want  to  build  a  Web  site,  and  not  just  random  pages  all 
linked  together,  you  can  do  it  a  lot  faster  if  you  use  FrontPage's 
Web  site  Templates  option.  If  you  go  to  File  >  New,  you  will  always 
get  a  blank  page  to  begin  with.  However,  below  the  File  menu, 
there's  an  icon  that  looks  like  a  blank  page  which  has  an  arrow 
next  to  it.  Click  on  this  arrow  and  you  will  see  the  Page,  Web  Site, 
Blank  Page  and  Text  File  options.  If  you  select  Page,  you  will  get  a 
Page  Templates  Wizard  that  will  help  you  choose  from  FrontPage's 


Select  Web  Site  to  start  building  a  new  site  from  a  template 
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presets.  If  you  select  Web  Site,  you 
will  get  a  similar  wizard  for  a  precon- 
figured  collection  of  pages  (a  Web 
site). 

If  you're  looking  to  set  up  a  site  for 
your  company,  FrontPage  will  make 
the  job  a  lot  easier,  because  it's  built 
mainly  to  handle  online  design  for 
small  businesses,  and  the  inbuilt  tem- 
plates will  prove  it.  Choose  from 
amongst  the  many  templates,  such  as 
Corporate  Presence  Wizard,  Customer 
Support  Web  Site,  Project  Web  Site 
and  more,  or  click  on  the  Packages 
tab  to  select  between  a  News  and 
Reviews  Site  or  a  Web  Log  (blog).  We 
chose  "Personal  Web  Site." 

Now,  if  you  want  to  save  your  site  to  a  particular  folder,  click 
on  the  Browse  button  on  the  right  and  tell  FrontPage  where  you 
want  it  saved.  By  default,  all  pages  and  Web  sites  are  saved  in  the 
My  Webs  folder  under  My  Documents. 

When  you  click  OK,  FrontPage  automatically  adds  the  most 
commonly-used  pages  for  the  template  you  selected.  In  our  case, 
we  got  pages  such  as  About  Me,  Favorites,  Feedback,  Interests,  and 
a  Photo  Gallery.  Obviously,  when  you  choose  a  business  site,  the 
pages  made  available  are  different.  For  example,  if  you  choose  the 
Corporate  Presence  Web  option,  a  Corporate  Presence  Web  Wizard 
will  pop  up  and  guide  you  through  setting  up  your  site  by  asking 
you  for  a  few  details.  See  the  large  screenshot  above  to  understand 
how  detailed  the  setup  Wizard  is. 

Now,  back  to  the  Personal  Web  Site  template  we  chose:  you 
need  to  start  from  the  index.htm  page,  which  will  be  your  home 
page.  Here  you  will  see  predefined  blocks  with  text  in  them.  This 
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You  can  use  either  the  Page  or 
Web  Site  Templates  to  help 
you  quickly  set  up  a  pre- 
configured  site 
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As  you  can  see,  the  Corporate  Presence  Wizard  is  very  thorough 


is  nothing  but  directives 
that  FrontPage  gives  you 
to  tell  you  what  content 
you  can  or  should  put  in 
a  certain  block.  Here  you 
will  see  a  link  bar  on  the 
left,  and  blocks  that 
describe  the  other  pages 
in  your  site.  After  this, 
editing  each  page  is  the 


The  Personal  Web  Site  template  that 
FrontPage  automatically  builds  for  you 
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same  as  we've  shown  you  earlier  in  this  chapter.  The  advantage 
with  using  the  templates  is  that  all  your  cross-linking  (linking 
from  one  page  in  a  site  to  another)  is  already  done  for  you.  All 
you  need  to  do  is  edit,  not  create! 

7.5.2  The  photo  album 

The  most  common  thing  on  most  personal  sites  on  the  Web  is  a 
photo  album.  With  digital  cameras  proliferating  and  almost  every 
phone  being  capable  of  images  of  decent  resolution,  there's  been 
an  explosion  of  personal  pictures  on  the  Web.  However,  you  will 
find  that  many  people  do  not  display  their  pictures  properly,  and 
some  even  just  put  them  all  into  a  folder  on  their  server,  leaving 
people  (friends,  family  or  even  strangers)  no  choice  but  to  click  the 
image  name  to  see  what  it  contains. 

To  begin  with,  leaving  the  names  of  the  pictures  as  what  the 
digital  camera  names  them  is  a  crime— OK,  so  it  isn't  one,  but  it 
ought  to  be!  How  can  you  expect  people  to  sift  through  names  like 
"DSC000102.jpg"?  Besides,  it's  not  very  search  engine-friendly,  and 
God  knows,  we  all  want  to  be  noticed  by  Google  these  days!  So  the 
first  thing  you  need  to  do  is  come  up  with  a  naming  convention 
for  all  your  pictures.  This  could  be  absolutely  anything  you  feel 
comfortable  with,  because  you  are  the  one  who  has  to  sort  them 
out.  An  example  is  "060525_Digit_Products_Games_Half_ 
Life2_04".  Here  you  can  see  that  there  are  multiple  tags  taken  care 
of:  there's  the  date  tag  right  in  the  beginning,  so  every  image  is 
automatically  sorted  in  ascending  order  of  date.  Then  there's  the 
word  "Digit",  which  indicates  that  this  image  was  used  in  Digit.  We 
also  know  that  this  is  a  "Product"  image  of  a  "Game"  called  "Half 
Life  2",  and  that  this  is  the  fourth  such  image.  All  that  informa- 
tion available  to  you  (and  let's  not  forget  Google)  without  even 
looking  at  the  actual  image! 

You  can  come  up  with  your  own  naming  convention  for  all 
your  images  and  sort  them  all  out  nice  and  neat.  You  have  to 
continue  to  do  that  on  your  Web  site,  and  this  is  easiest  done 
by  creating  albums.  Once  you've  sorted  all  your  images  into 
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albums,  you  can  begin 
working  on  the  HTML 
page(s)  for  your  online 
photo  album.  Click  on 
the  arrow  next  to  the 
blank  page  icon  under 
the  File  menu  and  select 
Page.  You  will  see  the 
Page  Templates  dialog, 
from  where  you  should 
select  the  Photo  Gallery  The  photo  Gal,erV  Pa§e 
option.  A  new  page  will  open  up  with  some  preset  images. 


If  you  double-click  the  default  images  that  are  displayed,  you 
will  see  the  Photo  Gallery  Properties  dialog  box.  From  here  you  can 
add  all  your  images  and  then  select  how  the  gallery  is  displayed.  In 
the  Pictures  tab,  you  can  add  or  remove  all  the  pictures  you  want, 
and  also  set  a  default  size  for  the  thumbnails.  Yes,  FrontPage  gener- 
ates thumbnails  for  all  the  images  you  add  into  your  photo  gallery, 
and  adds  "thumb_"  before  the  name  of  each  image  to  easily  identi- 
fy. In  the  Pictures  tab,  you  can  set  a  caption  and  description  for  each 
image— the  caption  is  added  as  the  tool  tip  (the  text  that  is  displayed 
when  you  hover  your  mouse  over  the  image)  and  also  below  or 
alongside  the  image.  The  description  is  then  added  below  that. 
Make  sure  to  always  have  captions  for  your  images,  even  if  you're  too 
lazy  to  type  out  entire  descriptions— you  can  save  that  for  the 
description  of  the  entire  photo  album. 


Clicking  on  the 
Layout  tab  will  let 
you  control  how  the 
gallery  is  displayed. 
You  will  see  four 
options:  Horizontal, 
Vertical,  Montage 
and  Slide  Show.  The 
most     popular  is 


The  Photo  Gallery  Properties  dialog  box  will  let  you 
control  how  the  gallery  looks 
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Slide  Show,  and  we're  not  about  to  argue  with  the  world,  so  we 
used  it  ourselves. 

You  need  to  remember  that  each  one  of  these  pages  is  one  of 
your  albums,  so  if  you  have  10  albums,  you  will  have  to  create  10 
such  pages  and  then  create  a  Photo  Gallery  home  page  where 
you  can  link  to  the  other  10  pages  and  show  a  few  images  from 
each  album. 

Overall,  FrontPage's  Photo  Gallery  is  no  match  for  some  of  the 
free  and  open  source  image  galleries  available  on  sites  such  as 
sourceforge.net,  but  it's  good  for  people  who  don't  want  to  get 
their  hands  dirty  with  PHP  code  and  MySQL  databases  and  the 
like.  Plus,  the  advantage  of  HTML  is  its  simplicity— just  upload  all 
the  files  and  your  Web  site  works;  no  database  servers  to  worry 
about— and  thanks  to  FrontPage,  no  coding  either! 

7.5.3  Just  copy 

Some  might  laugh  and  say  that  this  is  the  Indian  way,  but  jokes 
apart,  if  you  come  across  an  HTML-based  site  on  the  Web  that  you 
like,  and  want  to  base  your  site  on  that  design,  you  can  just  down- 
load the  site  using  FrontPage.  Of  course,  you  need  to  remember 
that  you  don't  want  to  indulge  in  plagiarism,  so  you  should  men- 
tion somewhere  in  your  site  that  your  design  was  inspired  by  the 
site  you  downloaded! 

FrontPage  has  an  Import  function  that  will  let  you  copy  an 
entire  site— or  part  of  it— to  your  computer,  and  let  you  start  edit- 
ing and  personalising  it.  Just  go  to  File  >  Import,  and  the  Import 
Web  Site  Wizard  will  pop  up.  You  will  see  many  options  for  how  to 
import  a  site,  the  most  important  of  which  are  FTP  and  HTTP.  To 
import  a  site  from  FTP,  you  will  have  to  have  its  FTP  username  and 
password  (which  means  you  probably  own  the  site),  but  with  HTTP, 
you  can  just  copy  a  site  and  all  the  images  and  files  it  contains  that 
are  publicly  visible. 
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Select  the  HTTP 
radio  button  and 
enter  the  URL  of  the 
site  you're  "inspired" 
by.  Now  click  Next, 
and  FrontPage  will 
check  to  see  if  the 
site  is  online.  Once  it 
finds  the  site,  it  will 
give  you  a  few 
options,  such  as  how 
many  levels  to  down- 
load, and  whether  to  download  only  images  and  Web  pages  or  all 
files  available.  Select  the  desired  settings,  and  sit  back  and  wait  till 
FrontPage  downloads  it  all.  Remember,  if  you  do  not  limit  the  lev- 
els (how  many  links  away  from  the  home  page)  that  FrontPage 
should  download,  you  might  end  up  waiting  for  a  very  long  time 
indeed!  Ideally,  don't  set  anything  more  than  20  levels,  or  you  will 
start  greying  while  you  wait  for  the  download  to  end. 


Use  FrontPage's  Import  option  to  copy  a  site  to 
your  hard  drive 


Once  the  download  is  complete,  FrontPage  will  open  the  site 
just  like  any  other  Web  Site  you  created  on  your  computer.  Now 
you  can  start  editing  the  site  and  personalising  it.  Remember,  give 
credit  to  your  inspiration! 
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Content  Management 
Systems 


Say  you  have  a  Web  site  and  want  to  expand  your  business. 
Wouldn't  you  want  prospective  clients  to  preview  your 
products  on  your  site?  You  will  probably  spend  days  working  on 
the  site  design.  Wouldn't  this  time  be  better  spent  in  ironing  out 
bugs  and  adding  even  more  features  to  your  software?  Now  say  you 
can't  afford  to  hire  a  Web  designing  company...  there  is  a  solution: 
the  Content  Management  System,  or  CMS. 
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8.1  Why  Do  I  Need  A  CMS? 


8.1.1  What  is  a  CMS? 

What  exactly  is  a  CMS?  From  Wikipedia,  "a  content  management  sys- 
tem is  sometimes  a  Web  application  used  for  managing  Web  sites  and 
Web  content,  though  in  many  cases,  content  management  systems 
require  special  client  software  for  editing  and  constructing  articles." 

Simply  put,  a  CMS  is  an  application  that  makes  developing  Web 
sites  that  much  easier.  All  you  will  ever  need  to  do  is  upload  and 
install  the  CMS  on  your  server!  Not  only  is  it  cheaper,  it  also  saves 
you  time— time  that  can  be  spent  giving  the  killer  edge  to  your  soft- 
ware. It  is  this  time  that  will  hold  the  key  to  the  success  of  your  busi- 
ness. Wouldn't  you  want  to  utilise  it  in  the  best  possible  manner? 

Here,  we  will  look  at  the  Web  Content  Management  Systems 
that  will  help  make  developing  your  site  a  more  pleasant  affair! 

8.1.2  Advantages  of  PHP-Based  CMSes 

There  are  various  types  of  Web  Content  Management  Systems,  but 
the  two  main  types  include  PHP-based  and  ASP-based  CMSes.  PHP- 
based  CMSes  are  more  popular  than  the  rest.  The  advantages  that 
PHP-based  CMSes  enjoy  over  others  are: 

o  These  Content  Management  Systems  are  based  on  PHP,  which  is 
a  relatively  easy  programming  language  to  learn. 

o  PHP  is  cross  platform,  so  you  need  not  worry  about  the  OS  or 
hardware  you're  running.  In  most  cases,  it  will  be  supported. 

o  PHP,  like  other  open  source  Software,  has  a  community  of  devel- 
opers willing  to  resolve  your  queries. 

o  Most  of  these  CMSes  are  free. 

o  PHP-Based  CMSes  are  easy  to  modify  and  do  not  require  exten- 
sive support,  which  is  ideal  for  small  businesses  and  independ- 
ent developers. 

o  Most  hosting  companies  support  PHP,  so  choosing  a  host  won"t 

be  a  problem  either, 
o  Generally,  these  CMSes  are  more  secure  than  the  others,  though 

security  largely  depends  upon  the  user. 
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8.2  A  Web  Server  On  Your  Home  Computer! 


Before  looking  at  the  content  management  systems,  let  us  look  at 
some  software  packages  that  help  us  to  run  these  scripts  on  our 
computers.  Suppose  you  own  a  small  business  and  have  developed 
a  Web  site  for  it  using  a  CMS.  Before  uploading  it  to  your  server 
and  launching  it,  wouldn't  you  want  to  test  your  Web  site?  As  in 
software  development,  bugs  tend  to  crop  up  no  matter  how  hard 
you  try  ironing  them  out.  So,  wouldn't  you  want  to  test  your  Web 
site  thoroughly  before  uploading  it?  Besides,  uploading  files  again 
and  again  is  time  consuming. 

There  are  various  applications  available  to  help  you  install  and 
run  the  required  software  necessary  for  running  a  Web  server 
right  on  your  computer.  All  this  without  any  prior  knowledge 
required!  So,  if  you  own  a  business  and  don't  quite  understand 
what  Apache,  MySQL  or  PHP  mean,  don't  worry.  Software  packages 
such  as  EasyPHP  and  XAMPP  are  specifically  developed  for  this 
very  purpose. 

8.2.1  EasyPHP 

EasyPHP,  like  XAMPP,  is  a  software  package  that  installs  Apache, 
MySQL  and  PHP  on  your  computer,  so  that  you  can  test  and  run  all 
your  PHP-based  Web  sites  without  uploading  it  to  a  Web  server. 
Apache  is  an  extremely  successful  open  source  Web  server.  MySQL 
is  an  open  source  database  system  that's  been  adopted  at  large  by 
the  Web  hosting  community. 

8.2.1.1  Installation 

Installing  EasyPHP  is  relatively  simple.  All  you  need  to  do  is  down- 
load the  software  from  their  site  (www.easyphp.org)  and  install  it. 
After  installing  EasyPHP,  launch  EasyPHP  from  Start  >  Program 
Files  >  EasyPHP 

The  program  will  launch  and  will  automatically  start  Apache 
as  well  as  MySQL.  Open  your  favourite  browser  and  go  to 
http://localhost  or  http://127.0.0.1,  and  if  all  is  well,  you  will  get  a 
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EasyPHP  welcome  page!  This  means  that  both  Apache  and  MySQL 
are  working  fine,  and  you"re  all  set  to  test  your  sites  now. 

Before  moving  on,  let  us 
tweak  our  installation  of 
EasyPHP  a  bit.  We  will  be 
editing  the  PHP 
Configuration  file.  Go  to 
C  \Program  Files\    The  EasyPHP  interface  is  simple  and 

uncomplicated 

EasyPHPx-x\php\  and  edit 

the  php.ini  file.  In  php.ini,  change  the  value  of  the 
"display_errors"  field  to  off.  If  error  displaying  isn't  turned  off,  it 
might  create  problems  with  some  CMSes. 

8.2.1.2  Usage 

EasyPHP  is  a  very  powerful 
but  at  the  same  time  a  very 
easy-to-use  software  pack- 
age. You  can  modify,  admin- 
ister, and  run  the  server  on 
your  computer  without  any 
prior  experience! 

All  is  well  if  you  see  this! 

Let  us  look  at  the  differ- 
ent options  available  in  EasyPHP.  On  clicking  the  little  "e"  icon 
next  to  the  Apache  button,  you  will  get  a  drop-down  menu  with 
options  for  configuring  as  well  as  administering  your  server. 

The  Help  menu  is  intended  for  those  new  to  EasyPHP,  and 
contains  basic  information  and  a  set  of  Frequently  Asked 
Questions  (FAQs). 

The  Configuration  menu  enables  you  to  modify  files  relating 
to  the  Apache,  MySQL,  PHP  and  PhpMyAdmin  installations  for 
further  fine-tuning  your  server.  You  can  also  check  out  the  plug- 
ins  and  configuration  files  of  PHP,  MySQL,  Apache  and 
PhpMyAdmin  by  clicking  on  Administration. 
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To  run  and  test  your  site 
using  EasyPHP,  you  need  to 
place  the  files  in  the  "www" 
directory  in  C:\Program 
Files\EasyPHPx-x\ 


1  

ted 

|     M  j.~IjL     \  £  Sti 

(!i\>ei* : 

MiiD 

<T:  3d 

F3 

Airwiistrstim 

|        L«d    .  H) 

F7 

F5 

=  Stop 

F3 

•\  EXt 

The  drop-down  menu  offers  many  options 


For  example,  let's 
assume  you've  developed  a 

site  using  a  CMS  and  have  placed  the  files  relating  to  the  site  in  the 
directory  "xyz".  To  install  and  run  the  CMS  on  EasyPHP,  you  will 
have  to  place  the  "xyz"  directory  in  the  "www"  directory  as  men- 
tioned above.  Now,  you  can  install  and  access  your  site  at 
http://localhost/xyz/ 


We  will  talk  about  the  features  as  well  as  the  installation  part 
of  different  CMSes  in  the  next  section. 


8.3  PHP-Nuke 


8.3.1  Introduction 

PHP-Nuke  is  one  of  the  most  popular  content  management  sys- 
tems around,  with  a  huge  user  base.  PHP-Nuke  is  free  software, 
and  is  released  under  the  GNU  General  Public  License  or  GPL.  It 
was  originally  based  on  Thatware,  a  popular  news  portal  system. 
The  current  version  is  7.9. 

Until  Version  7.5,  the  latest  version  of  PHP-Nuke  was  available 
for  download  on  their  site.  However,  since  version  7.5,  a  small  fee 
($10)  is  charged  for  downloading  the  latest  version  of  PHP-Nuke. 
However,  being  free  software  and  licensed  under  the  GPL,  you  can 
freely  distribute  the  source  code  of  PHP-Nuke. 

According  to  the  developers,  the  fee  paid  for  downloading  PHP- 
Nuke  is  used  for  the  further  development  of  the  CMS.  Besides,  for 
small  businesses  and  independent  developers  looking  for  a  CMS, 
the  fee  is  small  considering  the  features  offered  by  PHP-Nuke. 
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However,  earlier  versions  of  PHP-Nuke  are  available  for  download 
free  of  cost. 

Security  is  an  issue  relating  to  which  PHP-Nuke  has  been  criti- 
cised in  the  past.  But  security  is  a  debatable  issue,  and  as  men- 
tioned earlier,  depends  largely  upon  the  user. 

8.3.2  Features 

PHP-Nuke  is  a  modular  CMS,  which  means  you  can  turn  on  and  off 
its  modules  whenever  you  want.  PHP-Nuke  has  all  the  features 
you'd  require  for  running  and  maintaining  a  Web  site. 

o  For  businesses  and  developers  looking  for  a  download  manager, 
PHP-Nuke  has  a  fully-featured  Download  Management  system 
with  advanced  options. 

o  PHP-Nuke  has  a  fully-featured  WYSIWYG  editor  for  posting  news 
and  articles. 

o  For  developers  who  would  want  to  provide  support  on  their  Web 
site,  PHP-Nuke  has  an  integrated  Forum  system  powered  by 
PhpBB. 

oYou  can  also  turn  on  and  off  different  modules  and  blocks  from 
the  Administration  menu.  In  addition  to  this,  you  can  install 
add-ons  to  further  enhance  your  Web  site! 

o  PHP-Nuke  also  offers  Journals  (blogs)  for  registered  members  to 
post  their  own  articles.  If  you  want  to  send  a  newsletter  or  bul- 
letin to  your  customers,  PHP-Nuke  has  an  option  for  this  too! 

PHP-Nuke  is  a  good  CMS,  though  we'd  like  the  developers  to 
work  on  the  installation  part  as  well  as  the  security. 

8.3.3  Installation 

Installing  PHP-Nuke  under  EasyPHP  is  quite  easy.  The  installation 
process,  in  detail,  is  as  follows: 

1.  Download     the     latest     version     of     PHP-Nuke  from 
www.phpnuke.org.  Extract  the  PHP-Nuke  archive.  You  can  use 
WinRar  for  this  purpose. 
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2.  After  extracting  the  archive,  ensure  that  the  folders  "html"  and 
"sql"  are  present.  Copy  the  nuke.sql  file  from  the  "sql"  folder  to 
the  Desktop.  Let's  assume  that  we  will  be  installing  PHP-Nuke  in 
a  directory  called  "nukel". 

3.  Create  a  new  folder  called  "nukel"  and  copy  the  contents  of  the 
"html"  folder  into  it. 

4.  Place  the  "nukel"  folder  in  the  "www"  directory  in  C:\Program 
Files\EasyPHPx-x\.  Ensure  that  EasyPHP  is  running. 

5.  Now,  point  your  browser  to  http://localhost/mysql/.  If  EasyPHP  is 
running,  you  will  be  logged  into  PhpMyAdmin.  The  default  user- 
name  for  MySQL  on  EasyPHP  is  "root",  and  the  password  is  dis- 
abled, that  is,  it's  blank. 

6.  In  the  main  PhpMyAdmin  menu,  under  "Create  new  database", 
enter  the  database  name  "phpnuke"  and  click  on  "Create".  If  the 
database  creation  is  successful,  you  will  be  browsing  the  "php- 
nuke" database. 


7.  Under  the  "phpnuke" 
database,  click  on  "SQL" 
on  the  top  bar.  Under  the 
sub-heading  "Location  of 
the  textfile",  click  on 
Browse  and  select  the 
nuke.sql  file,  which  we 
copied  to  the  Desktop. 
Now  click  on  "GO". 


8.  We  now  need  to  edit  the 
configuration  file  to 
enter  the  details  about 
your  server.  Go  to 
C:\Program 
Files\EasyPHPx- 


WW 

Welcome  to  phpMyAdniln  2.6.1 

phpMtpSflMb 

Creating  the  PHP-Nuke  Database 


Installing  the  PHP-Nuke  Database 
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x\www\nukel\  and  edit  the  config.php  file.  Once  the  file  is 
open,  the  editing  is  pretty  simple.  Under  $dbuname,  enter 
"root",  since  it  is  your  MySQL  username.  Let  the  Sdbpass  field 
remain  blank,  as  we  said  in  point  6.  Change  the  value  of  the 
$advanced_editor  field  to  "1". 

9.  It's  done!  Assuming  you  followed  all  the  steps  correctly,  when 
you  point  your  browser  to  http://localhost/nukel/  you  should  get 
your  very  own  PHP-Nuke  installation. 

10.  Next  comes  another 
important  part.  On  the 
home  page  of  your  PHP- 
Nuke  installation,  you 
will  get  a  link  to  create 
the  super  user.  Click  on 
it,  enter  your  details 
and  register  the 
account.  This  will  be  the 
administration  account 
that  will  be  used  to 
manage  your  Web  site.  Now  log  in  to  the  administration  menu 
and  start  modifying  your  dream  site! 

8.3.4  Resources 

Being  one  of  the  most  popular  CMSes,  PHP-Nuke  has  lots  of  sup- 
port Web  sites,  which  offer  themes,  patches,  modules  and  other 
utilities. 

One  of  the  best  sites  for  customising  PHP-Nuke  is 
Nukeresources.com.  The  site  offers  add-ons,  fixes  and  themes  for 
all  versions  of  PHP-Nuke,  right  from  4.x.  Another  Web  site  that 
specialises  in  PHP-Nuke  security  is  Nukecops.com.  This  is  a  must- 
visit  for  everyone  planning  to  use  PHP-Nuke  as  their  CMS. 

Nukemods.com  offers  beautiful  themes  for  PHP-Nuke.  They  are 
very  popular  within  the  PHP-Nuke  community. 
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The  PHP-Nuke  Administration  Menu 
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BestTests.com  is  a  popular  site  based  on  PHP-Nuke.  It  offers  free 
practice  tests  for  various  entrance  exams. 

MyTechDept.com  is  another  side  powered  by  PHP-Nuke.  It  offers 
the  latest  security  patches  and  information  about  virus  threats. 

8.4  Mambo 


8.4.1  Introduction 

Another  popular  CMS,  Mambo  is  very  easy  to  use.  It  is  an  open 
source  CMS  developed  by  the  Mambo  Foundation,  which  is  a  non- 
profit organisation.  The  current  version  of  Mambo  is  4.5.4,  which 
is  the  final  release  in  the  4.5.x  series.  The  developers  are  focused 
on  the  next  version  of  Mambo— 4.6— which  is  expected  to  introduce 
many  new  features. 

The  minimum  requirements  for  Mambo  are  Apache  (version 
1.3.19  or  above),  MySQL  (version  3.23.x  or  above),  and  PHP  (4.2.x).  It 
works  well  with  most  browsers,  including  Firefox,  Internet  Explorer, 
Safari  (Mac)  and  Opera.  Mambo  has  had  its  share  of  controversies, 
however.  In  2005,  due  to  internal  disputes,  a  breakaway  faction  of 
Mambo  developers  formed  Joomla,  a  CMS  based  on  Mambo.  After 
this,  the  rights  to  the  Mambo  CMS  code  base  were  transferred  to  the 
Mambo  Foundation.  Mambo  is  released  under  the  GPL. 

UK  magazine  Linux  Format  adjudged  Mambo  as  the  Best  Free 
Software  Project  of  The  Year  in  2004.  Mambo  was  also  named  the  Best 
Open  Source  Software  Solution  at  LinuxWorld,  San  Francisco,  in  2005. 

8.4.2  Features 

Mambo  can  be  used  for  everything  ranging  from  personal  journals 
to  complex  professional  Web  sites.  Some  of  the  unique  features  of 
Mambo  are: 

o  Unlike  PHP-Nuke,  the  installation  and  administration  of  Mambo 
is  simple.  The  Admin  menu  is  clean  and  well-defined. 
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o  Mambo  features  a  page  caching  mechanism,  which  improves 
performance  in  sites  with  heavy  traffic. 

o  A  fully-featured  WYSIWYG  editor  is  built  into  Mambo  with  sup- 
port for  scheduling  and  Flash  content. 

o  Mambo  features  Search  Engine-Friendly  URLs,  which  help  your 
search  engine  rankings. 

o  Mambo  also  features  an  Advertisement  Manager  for  displaying 
and  managing  the  ads  that  will  be  displayed  on  your  Web  site. 

o  Different  bulletin  board  systems  such  as  vBulletin,  PhpBB,  and 
SMF  can  be  integrated  with  Mambo. 

o  Mambo  has  a  large  developer  and  user  community  ready  to  help 
people  with  Mambo-related  queries  and  problems. 

8.4.3  Installation 

1.  Download  the  latest  version  of  Mambo  from  www.mamboserv- 
er.com.  We  recommend  using  WinRar  to  extract  the  tar.gz  archive 
on  Windows. 

2.  Copy  the  extracted  con- 
tents to  a  new  folder 
"mambo".  Place  this  fold- 
er in  the  "www"  directo- 
ry in  C:\Program 
Files\EasyPHPx-x\ . 

3.  From  here  on,  the  instal- 
lation is  pretty  simple. 
Point  your  browser  to 
http://localhost/mambo/. 
Mambo  will  run  a  pre- 
installation  check.  If 
EasyPHP  is  running,  the  check  will  be  successful,  and  you  can  go 
ahead  and  install  Mambo! 

4.  After  Mambo  runs  the  pre-installation  check,  click  the  Next 
button  at  the  top  of  the  page.  You  will  now  have  to  enter  the 
server  details. 

5.  Here,  under  "Host  Name",  enter  "localhost",  then  input  your 
MySQL  user  name  i.e.  "root"  and  leave  the  MySQL  Password 
field  blank.  Enter  the  database  name  as  "mambodb".  Click 
Next.  If  you  entered  the  details  correctly,  you  will  be  taken  to 
the  next  step. 


pre-installation  check  EHI3 

o 

□SI  certified 

The  Mambo  pre-installation  check 
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6.  You  will  get  a  page  to 
confirm  the  site  details. 
Here,  the  URL  should  be 
http://localhost/mambo 
and  the  Path  should  be 
C:\Program 
Files\EasyPHPx- 
x\www\mambo.  Enter 
your  mail  ID  and  admin 
password  as  well. 

7.  If  all  goes  well,  your  installation  of  Mambo  will  be  complete! 
Now  click  on  the  "Administration"  link,  enter  your  details,  and 
start  modifying  your  site! 

8.4.4  Resources 

Mambo  has  a  huge  base  of  resource  sites. 

MamboXchange.com  is  a 
site  that  connects  Mambo 
developers  from  around  the 
world.  Here's  where  to  go  if 
you're  interested  in  the  devel- 
opment of  Mambo. 


MamboDesign.co.uk  offers 
the  latest  and  best  Mambo  tem- 
plates. It  has  both  free  as  well 
as  paid  templates  for  your  Mambo-powered  site. 

Mambopower.net  is  another  Mambo  modification  site  offerings 
lots  of  modules,  hacks  and  templates.  Newropeans-Magazine.org  is 
a  news  site  based  on  Mambo.  According  to  Alexa,  it  is  one  of  the  top 
10  media  sites  in  the  world. 

Mitsubishi.com.pl  is  the  Web  site  of  Mitsubishi  Motors,  Poland, 
which  uses  Mambo  as  its  CMS. 
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Entering  the  server  details 
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8.5  PostNuke 


8.5.1  Introduction 

PostNuke  is  a  popular  CMS  and  is  based  on  PHP-Nuke.  It  is  classi- 
fied as  open  source  software  and  is  released  under  the  terms  of  the 
GPL.  This  CMS  is  developed  by  the  PostNuke  Software  Foundation, 
and  is  offered  free  of  charge. 

The  requirements  of  PostNuke  include  PHP  (version  4.1.0  or 
later)  and  MySQL  (version  3.23  or  later).  The  developers  recom- 
mend the  use  of  Apache  Web  server  for  taking  advantage  of 
PostNuke  ShortURLs  technology,  which  makes  the  site  URLs  short- 
er and  more  search-engine  friendly. 

As  mentioned  earlier,  PostNuke  is  based  on  PHP-Nuke.  It  was 
developed  by  a  few  users  of  PHP-Nuke,  who  felt  that  the  develop- 
ment environment  should  be  free.  The  current  version  of 
PostNuke  is  0.762,  and  version  0.800  is  in  the  works. 

In  2005,  the  German  PostNuke  Community  won  the  Galileo 
Computing  Open  Source  Sponsorship  presented  by  Galileo  Computing. 

8.5.2  Features 

PostNuke  is  a  CMS  that  can  be  used  out  of  the  box.  Unlike  PHP- 
Nuke,  you  don't  need  to  customise  PostNuke  too  much.  It  is  anoth- 
er modular  Content  Management  System  in  which  you  can  turn 
on  and  off  the  various  modules  whenever  you  want, 
o  PostNuke  is  a  very  secure  CMS,  and  the  developers  acknowledge 

security  an  area  of  prime  focus, 
o  PostNuke  has  an  advanced  theme  engine  called  Xanthia.  This  is 
one  of  the  best  theme  engines  with  advanced  configuration 
options  and  support  for  CSS  stylesheets. 
oThe  Administration  Menu  is  simple,  and  is  well  divided  into  tabs 

for  avoiding  clutter. 
oThe  News  Submission  module  is  simple  yet  powerful.  You  can  post 
a  story  in  parts— the  lead  in,  the  main  body  and  the  trailing  notes! 
o  As  in  PHP-Nuke,  you  can  activate  or  de-active  the  various  mod- 
ules and  blocks  according  to  your  needs. 


EMI  FAST  TRACK 


137 


VIII 


CONTENT  MANAGEMENT 
SYSTEMS 


WEB  DESIGN 


o  There  are  as  many  as  36  language  packs  available  for  PostNuke 
for  localisation.  This  feature  is  useful  if  you're  looking  at  devel- 
oping a  non-English  Web  site. 


8.5.3  Installation 

1.  Download  the  latest 
version  of  PostNuke 
from  http://www.post- 
nuke.com.  We  recom- 
mend you  use  Win 
Rar  to  extract  the 
archive  on  Windows. 

2.  After  extracting  the 
archive,  copy  the  con- 
tents of  the  "html" 
folder  to  a  new  folder 
"postnuke".  Place 
this  "postnuke"  fold- 
er in  the  "www" 
directory  in 
C:\ProgramFiles 
\EasyPHPx-x\ 

3.  Now  point  your 
browser  to  http:// 
localhost/postnuke/ 
install. php.  You 


PostNuke's  pre-installation  check 


The  PostNuke  Admin  Panel 


should  get  the  initial  PostNuke  installation  page.  Select  your 
language  and  click  on  "Set  Language".  PostNuke  will  now  run  an 
installation  check.  Click  Continue. 


4.  You  will  be  presented  with  a  page  asking  for  the  server  details. 
In  "Username"  enter  "root"  and  leave  the  "Password"  field 
blank.  In  the  "Database  Name"  field  enter  "postnukedb".  Click 
Submit.  If  you  entered  all  the  details  correctly,  you  will  be  taken 
to  another  page.  Here,  review  the  information  you  entered,  and 
click  on  "New  Installation". 
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5.  You  will  now  be  presented  with  the  "New  Install"  page.  At  the 
bottom,  check  "Create  the  Database"  and  click  on  "Start". 

6.  The  installer  will  create  the  database  for  you.  Now,  you  will  need 
to  enter  personal  details  for  the  administration  account.  After 
you  have  entered  the  details,  click  on  "Set  Login". 

7.  That's  about  it— the  installation  of  PostNuke  is  complete!  Now, 
log  in  to  your  new  site  and  start  modifying  it  by  logging  into  the 
Administration  menu.  However,  you  will  need  to  delete  the 
install.php  file  and  the  "install"  folder  from  C:\Program 
Files\EasyPHPx-x\www\postnuke  before  logging  into  the  admin 
panel,  for  security  reasons. 

8.5.4  Resources 

Over  the  years,  PostNuke  has  developed  into  a  mature  CMS  and  has 
quite  a  few  support  sites  that  offer  tools  for  modifying  PostNuke. 

Community  .Postnuke.com  offers  a  comprehensive  list  of  mod- 
ules, themes  and  blocks  for  customising  your  PostNuke 
installation. 

PostNuke.ru  is  a  resource  site  for  PostNuke  that  offers  some  use- 
ful modules.  It  is  quite  popular  among  the  PostNuke  community. 

Postnuke.lexebus.net  is  a  very  good  site  that  offers  themes  for 
PostNuke.  In  addition  to  this,  they  offer  blocks  and  modules. 

Vulkan24.com/vulkan.de/  is  the  Web  site  of  Vulkan,  a  market 
leader  in  the  manufacturing  of  power  couplings.  They've  used 
PostNuke  as  a  CMS  for  their  site. 

It-shop.t-com.de  is  an  online  shopping  Web  site  powered  by 
PostNuke. 
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8.6  Joomla 


8.6.1  Introduction 

A  relatively  new  CMS,  Joomla  has  taken  the  CMS  industry  by 
storm.  Based  on  Mambo,  it  is  elegant  and  extremely  easy  to  use. 

It  is  classified  as  open  source  software  and  is  licensed  under 
the  terms  of  the  GPL.  It  can  be  downloaded  free  of  cost  from  joom- 
la.org,  and  the  current  version  is  1.0.8.  According  to  the  develop- 
ers, Joomla  2.0.0  will  be  completely  re-written  with  PHP5. 

Joomla  came  into  existence  as  a  result  of  a  dispute  between  the 
developers  of  Mambo.  Miro  Corporation,  which  held  the  trade- 
mark for  the  name  Mambo,  came  together  with  a  bulk  of  the  core 
developers  to  form  Joomla.  They  registered  a  non-profit  organisa- 
tion to  fund  the  project  and  to  protect  it  from  lawsuits. 

Joomla  is  the  phonetic  spelling  of  the  Swahili  word  Jumla, 
which  means  "together." 

8.6.2  Features 

Being  largely  based  on  Mambo,  Joomla  has  a  similar  set  of  fea- 
tures. However,  it  stands  out  due  to  certain  key  features: 

o  Like  Mambo,  Joomla  looks  like  just  another  HTML  site.  So,  the 
customisation  required  for  Joomla  is  limited. 

o  The  news  and  article  management  system  is  the  most  advanced, 
with  a  fully-featured  WYSIWYG  editor  integrated  with  options 
to  add  tables,  flash  content  and  advanced  HTML  content. 

o  There  is  an  option  to  add  Metadata  to  each  news  story,  which  is 
a  very  useful  option  and  helps  in  enhancing  search  engine  rank- 
ings. 

o  Joomla  features  an  advanced  caching  system  that  helps  in 

improving  performance  on  busy  sites, 
o  An  RSS  management  system  is  built  into  Joomla,  and  you  can  use 

it  to  provide  news  feeds  from  your  site, 
o  The  Theme  Engine  is  a  wonderful  addition— a  lot  of  elegant 

themes  are  available. 
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8.6.3  Installation 

1.  Download  the  latest  version  of  Joomla  from  www.joomla.org. 
We  recommend  using  WinRar  to  extract  the  archive  on  Windows. 
Copy  the  extracted  contents  to  a  new  folder  "joomla".  Place  this 
folder  in  the  "www"  directory  in  C:\Program  Files\EasyPHPx-x\. 

2.  From  now  on,  the  installation  is  quite  simple.  Point  your  brows- 
er to  http://localhost/joomla/.  Joomla  will  now  run  a  pre-instal- 
lation  check.  After  this,  you  can  go  ahead  and  install  Joomla. 

4.  After  Joomla  runs  the  pre-installation  check,  click  the  Next 
button  at  the  top  of  the  page.  Now  enter  the  details  about  the 
local  server. 

5.  Under  "Host 
Name",  enter 
"localhost",  then 
enter  your  MySQL 
user  name,  i.e., 
"root",  and  leave 
the  MySQL  pass- 
word field  blank. 
Enter  the  data- 
base    name     as    Joomla's  installation  Wizard  runs  the  pre-install  check 

"joomladb".  Click 

Next.  If  you  entered  all  the  details  correctly,  the  installer  will 
proceed  to  the  next  step. 

6.  At  the  next  page,  you'll  need  to  confirm  the  Web  site  details. 
Here,  the  URL  should  be  http://localhost/joomla  and  the  Path 
should  be  C:\Program  Files\EasyPHPx-x\www\joomla.  Enter 
your  e-mail  ID  and  administration  password  as  well. 

7.  If  you  followed  all  the  instructions  correctly,  your  installation  of 
Joomla  should  be  complete!  Now  click  on  the  "Administration" 
link,  enter  your  details,  and  start  modifying  your  site! 
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8.6.4  Resources 

Since  Joomla  was  formed  after  the  development  team  at  Mambo 
split  up,  quite  a  few  of  Mambo  resource  sites  decided  to  convert 
themselves  into  Joomla  resource  sites. 

Joomlart.com  provides  free  as  well  as  paid  themes  and  a  few 
extensions  for  Joomla.  The  themes  are  elegant  and  are  popular 
within  the  community. 

Joomlashack.com  is  another  theme  site  that  offers  both  free  as 
well  as  paid  themes  for  the  Joomla  CMS. 

Mamboportal.com  is  a  very  popular  Joomla  modification  site 
that  offers  useful  modules  and  themes  for  Joomla. 

Pychotka.pl  is  a  popular  Polish  cooking  site  made  in  Joomla. 

Hausgarten.net  is  a  German  gardening  site  powered  by  Joomla. 

8.7  Drupal 


8.7.1  Introduction 

Arguably  the  second-most  popular  CMS  after  PHP-Nuke,  Drupal 
was  essentially  a  blogging  engine.  But  over  the  years  it  has  evolved 
into  a  fully-featured  content  management  system.  It  is  developed 
and  maintained  by  a  group  of  independent  developers.  It  is  offered 
free  on  Drupal.org,  and  the  current  version  is  4.7.1. 

Drupal  was  originally  written  as  a  bulletin  board  system  by 
Dries  Buytaert.  "Drupal"  is  the  English  spelling  of  the  Dutch  word 
"Druppel,"  which  means  a  drop  of  water.  It  is  released  under  the 
terms  of  the  GPL.  The  Drupal  core  offers  excellent  protection 
against  security  threats,  which  is  ideal  for  small  businesses  as  well 
as  independent  developers.  Due  to  its  flexible  interface,  features 
and  ease  of  use,  many  popular  sites  use  Drupal  as  their  base. 
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8.7.2  Features 

Over  the  years,  Drupal  has  gained  most  of  the  features  that  a  CMS 
has,  and  today,  it  is  on  par  with  other  CMSes  as  regards  features: 

o  One  of  the  unique  selling  points  of  Drupal  is  its  theme  engine. 

It  offers  a  lot  of  options  for  customising  each  theme.  Drupal  is 

known  to  be  a  very  flexible  CMS,  and  there  are  quite  a  lot  of 

themes  available  for  customising  your  Drupal  installation, 
o  The  module  management  system  in  Drupal  is  pretty  simple  and 

offers  you  options  to  enable,  disable  or  update  the  different 

modules  available, 
o  It  offers  a  comprehensive  Content  Creation  system  that  offers 

various  input  formats,  authoring  and  publishing  options, 
o  You  can  restrict  access  to  parts  of  your  site  through  the  Access 

Control  system.  You  can  also  set  Access  Rules  and  Roles, 
o  There  is  a  useful  comments  management  system  wherein  you  can 

approve,  modify  and  delete  comments  made  on  your  Web  site. 

8.7.3  Installation 

1.  Download  the  latest  version  of  Drupal  from  www.drupal.org. 
Extract  the  archive  using  WinRar  or  WinZip. 

2.  Copy  the  extracted  contents  to  a  new  folder  called  "drupal". 
Place  this  folder  in  the  "www"  directory  in  C:\Program 
Files\EasyPHPx-x\ 

3.  You'll  have  to  create  a  database  using  PhpMyAdmin.  Go  to 
http://localhost/mysql/.  In  the  main  PhpMyAdmin  menu,  under 
"Create  new  database",  enter  the  database  name  "drupaldb" 
and  click  on  "Create". 


4.  Under  the  "drupaldb"  data- 
base, click  on  SQL  on  the  top 
bar.  Under  the  sub-heading 
"Location  of  the  textfile", 
click  Browse  and  select  the 
"database.4.1.mysql"  file, 

which      is      located  in 

Populating  the  Drupal  database 
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"C:\Program  Files\EasyPHPx-x\www\drupal\database\".  Then 
click  on  "GO". 


5.  In  the  next  step,  you'll  have  to  edit  the  configuration  file  to  enter 
details  about  your  server.  Go  to  "C:\Program  Files\  EasyPHPxx 
\www\drupal\sites\  default"  and  edit  the  file  "settings.php".  In 
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this  file,  in  the  field  "$db_url",  enter  "mysql://root:@localhost 
/drupaldb"  (without  the  quotes),  "root"  being  your  MySQL  user- 
name  and  "drupaldb"  being  the  database  name. 

6.  The  installation  part  is  now  complete.  Point  your  browser  to 
http://localhost/drupal/.  To  begin  with,  you  will  have  to  create  an 
admin  account.  Click  on  "Create  the  First  Account"  on  the  home 
page  of  your  Drupal  installation.  Now  login  into  Drupal  and 
start  customising  your  site  from  the  admin  menu! 

8.7.4  Resources 

Like  other  popular  CMSes,  Drupal  has  quite  a  few  resource  sites. 
Also,  a  lot  of  popular  sites  are  powered  by  Drupal. 

Themes.drupal.org  offers  a  comprehensive  list  of  free  themes 
for  Drupal.  These  themes  are  elegant  as  well  as  light,  which  is  one 
of  the  reasons  for  Drupal's  popularity. 

For  users  who  would  want  to  customise  Drupal,  http://dru- 
pal.org/project/Modules  offers  a  lot  of  useful  modules  for  modify- 
ing the  CMS. 

SpreadFirefox.com,  the  home  of  Firefox  community  market- 
ing, is  powered  by  Drupal. 
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TheOnion.com,  the  popular  faux  news  site,  is  based  on  Drupal 
and  shows  the  extent  to  which  this  CMS  can  be  modified. 

ProjectOpus.com,  a  music  download  site,  uses  Drupal  as  its  base. 

8.8  XOOPS 


8.8.1  Introduction 

XOOPS  is  a  free  Content  Management  System  released  under  the 
terms  of  the  GPL.  XOOPS  can  be  freely  modified,  distributed  and  used 
under  the  terms  of  the  GPL.  It  was  initially  developed  as  a  portal  sys- 
tem, but  over  the  years,  it  has  developed  into  a  proper  Content 
Management  System. 

XOOPS  is  an  acronym  for  extensible  Object  Oriented  Portal 
System.  It  can  serve  as  a  Web  framework  for  use  by  small,  medium 
and  large  sites.  According  to  XOOPS.org,  XOOPS  is  pronounced 
"Zoops."  It  is  maintained  and  developed  by  the  XOOPS 
Foundation,  a  non-profit  organization. 

8.8.2  Features 

Another  modular  CMS,  XOOPS  has  developed  into  a  fully  featured 
CMS  over  the  years.  It  offers  a  clean  and  elegant  environment  and 
offers  quite  a  few  unique  features: 

o  XOOPS  offers  one  of  the  best  Module  Administration  systems. 
The  interface  is  icon-based,  and  you  need  to  install  the  modules 
according  to  your  requirements. 

o  The  XOOPS  Download  Manager  is  quite  comprehensive  and 
offers  options  for  submitting  content,  reporting  broken  links 
and  other  such  options.  You  can  further  modify  and  tweak  the 
download  manager  from  the  Preferences  menu. 

o  XOOPS  has  a  basic  Bulletin  Board  module  bundled.  This  module 
is  useful  for  those  looking  to  offer  basic  support  to  the  cus- 
tomers on  their  site. 

o  However,  one  wishes  that  the  developers  would  improve  upon 
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the  News  Management  system,  which  lacks  on  features  that  are 
supported  by  other  popular  CMSes. 

o  XOOPS  features  a  useful  Web  Links  system  wherein  users  can 
add,  submit  and  rate  various  Web  sites. 

8.8.3  Installation 

1.  Download  the  latest  version  of  XOOPS  from  www.xoops.prg 
Extract  the  downloaded  archive.  You  can  use  WinRar  or  Winzip. 

2.  After  extracting  the 
archive,  you  will  get 
three  folders  named 
"html",  "extras"  and 
"docs".  Copy  the  con- 
tents of  the  "html"  fold- 
er into  a  new  folder  The  XOOPS  installation  Wizard 
called    "xoops".  Place 

this  folder  in  the  "www"  directory  in  C:\Program 
Files\EasyPHPx-x\. 

3.  Now,  point  your  browser  to  http://localhost/xoops/.  You  will  get 
the  XOOPS  installation  wizard.  Select  your  language  and  click 
Next.  XOOPS  will  run  a  pre-installation  check.  Click  Next  again. 

4.  Here  you  will  be  presented  with  the  General  Configuration 
Wizard.  Enter  the  database  username  as  "root"  and  leave  the  pass- 
word field  blank.  In  the  Database  Name  field,  enter  "xoopsdb". 
The  wizard  will  automati- 
cally detect  physical  and 
virtual  Paths.  Click  Next. 


5.  The  wizard  will  save  the 
data  you  entered  to  the 
configuration  file,  and  it 
will  attempt  to  create  a 
database.  Click  Next. 


xqgpt)   -  ^ 


Chetking  file  and  dlrec-torv  psmwssifis.. 
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6.  After  the  database  creation,  you  will  get  a  page  where  you'll 
need  to  enter  your  personal  details  for  creation  of  the  adminis- 
tration account.  Enter  your  details  and  click  Next. 

7.  Installation  is  complete!  Log  in  into  your  site  using  the  admin 
account  you  just  created  and  start  modifying  your  site  from  the 
Administration  Menu. 

8.8.4  Resources 

XOOPS  has  a  large  and  enthusiastic  community  with  quite  a  few 
sites  offering  themes,  modules  and  other  utilities. 

Xoops-tips.com  is  a  site  that  offers  tips  and  tricks  to  make  your 
XOOPS  installation  that  little  bit  better. 

Another  site  that  offers  XOOPS  modules  and  themes  is 
Xoopsfactory.com. 

AstonThemes.com  is  a  Web  site  that  specialises  in  XOOPS 
themes. 

Drackouniverse.com  is  a  fantasy  novel  Web  site  powered  by 
XOOPS. 

Buzaulive.ro,  a  Web  site  on  the  city  Buzau,  sports  a  XOOPS 
installation  with  an  elegant  look. 

8.9  PHP-Fusion 


8.9.1  Introduction 

PHP-Fusion  is  not  as  big  or  popular  as  other  content  management 
systems.  But  it  still  is  one  of  the  best  free  CMSes  available.  It  is  an 
extremely  light  CMS,  which  does  not  miss  out  on  any  features.  The 
interface  is  minimal  and  elegant.  It  has  been  developed  by  Nick 
Jones  in  PHP  and  utilizes  MySQL  as  a  database  system  for  the  con- 
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tents.  It  is  offered  free  at  php-fusion.co.uk,  the  current  version  is 
6.00.307,  and  the  roadmap  for  the  future  looks  solid. 

Being  a  relatively  small  CMS,  the  community  has  bound 
together  tightly  and  offers  comprehensive  support  to  people  will- 
ing to  use  PHP-Fusion  for  developing  their  Web  site. 

8.9.2  Features 

PHP-Fusion  is  a  very  simple  CMS.  It  is  specifically  meant  for  people 
who  want  to  keep  their  site  light,  simple  and  feature-rich. 

o  Being  a  modular  content  management  system,  you  can  turn  on 

and  off  various  parts  of  PHP-Fusion, 
o  PHP-Fusion  offers  a  pretty  basic  Article  Management  system. 

This  is  ideal  for  people  who  would  want  to  post  news  on  their 

Web  site  without  too  much  formatting, 
o  It  is  one  of  the  few  content  management  systems  that  offers  an 

integrated  Photo  Album  system.  You  can  add  categories,  scale 

images,  and  display  your  photos  on  the  main  page  using  the 

photo  album  module, 
o  There  is  a  comprehensive  User  Administration  system  offered  by 

PHP-Fusion  wherein  you  can  create  user  groups,  modify  users, 

blacklist  and  ban  troublemakers,  and  give  privileges  to  groups, 
o  The  Administration  Menu  is  very  simple  and  is  divided  into 

three  parts— Content  Admin,  System  Admin  and  User  Admin. 

8.9.3  Installation 

1.  Download  the  latest  version  of  PHP-Fusion  from  http://php- 
fusion.co.uk.  You  will  need  WinRar  to  extract  the  archive  on 
Windows. 

2.  After  extracting  the  archive,  you  will  get  quite  a  few  files  and 
folders.  Copy  the  contents  of  the  "php-files"  folder  into  a  new 
folder  "fusion".  Place  this  folder  in  the  "www"  directory  in 
C:\Program  Files\EasyPHPx-x\. 

3.  You  will  need  to  create  a  database  for  PHP-Fusion  using 
PhpMyAdmin.  Go  to  http://localhost/mysql/.  In  the  main 
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PhpMyAdmin  menu,  under  "Create  new  database" 
database  name— "fusiondb"— and  click  Create. 


enter  the 


4.  Now  point  your  browser 
to  http://localb.ost/ 
fusion/.  The  installation 
script  will  run  the  pre- 
installation  check.  In 
the  next  step,  you  will 
have  to  enter  details 
about  your  server.  In 
Database  Username 
enter  "root"  and  leave 
the  Database  Password 
field  blank.  Enter 
"fusiondb"      as  the 


FDHF'-f=U5ICI\l 


The  Database  access  settings 


Database  Name.  Ensure  you've  entered  all  details  correctly.  To 
continue,  click  Next. 


5.  If  you  entered  all  infor- 
mation correctly,  the 
installer  will  create  the 
database  tables  in  the 
"fusiondb"  database. 
You  will  now  be  asked  to 
enter  details  about  your 
Super  Admin  account, 
which  will  be  used  to 
administer  your  PHP- 
Fusion  installation. 
After  entering  your 
details,  click  Next. 

6.  If  all  goes  well,  the 
installation  part  will  be 
complete.  Point  your 
browser  to  http://local- 
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PHP-Fusion's  Admin  Panel  is  well 
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host/fusion/  to  view  your  very  own  PHP-Fusion  installation.  For 
security  reasons,  delete  "setup.php"  from  "C:\Program  Files\ 
EasyPHPx-x\  www\fusion". 

7.  Log  in  into  PHP-Fusion  and  start  modifying  your  site  using  the 
Admin  Panel.  PHP-Fusion  is  very  flexible  and  offers  a  lot  of  options. 

8.9.4  Resources 

Being  a  smaller  CMS,  PHP-Fusion  does  not  have  the  kind  of 
resource  sites  a  bigger  and  more  popular  CMS  would  have.  But, 
despite  being  limited,  the  modules  and  themes  available  for  this 
CMS  are  excellent. 

www.PhpFusion-Themes.com  is  a  resource  site  for  PHP-Fusion 
that  offers  simple,  elegant  themes  for  the  CMS. 

www.PhpFusion-Mods.com  is  a  site  that  offers  useful  modules 
and  hacks  for  PHP-Fusion. 

www.Cruisejournals.com  is  a  community  Web  site  powered  by 
PHP-Fusion. 

www.Web-bureau.com  is  a  site  that  offers  tips,  articles  and 
tutorials  on  how  to  make  a  great  Web  site.  This  site  uses  PHP- 
Fusion  as  its  CMS. 

8.10  el07 


8.10.1  Introduction 

el07  is  another  popular  CMS  widely  used  for  developing  Web  sites. 
It  is  released  under  the  terms  of  the  GPL. 

The  requirements  for  el07  are  Apache,  MySQL  (3.23  and  above) 
and  PHP  (4.3.0  and  above).  The  developers  recommend  using 
Apache  as  the  Web  server,  though  any  Web  server  supporting 
MySQL  and  PHP  should  work.  The  current  version  offered  is  0.7.5. 
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The  el07  community  offers  comprehensive  support  to  users 
through  their  forums,  wild  and  FAQ  site. 

8.10.2  Features 

Like  Joomla,  el07  looks  just  like  an  HTML  site,  and  requires  very 
little  customisation.  It  can  be  used  out  of  the  box  and  has  quite  a 
few  key  features. 

o  The  Administration  Panel  is  neat  and  offers  quite  a  lot  of  infor- 
mation about  your  el07  installation. 

o  The  Content  Creation  system  is  quite  comprehensive  and  offers 
lots  of  options.  Although  the  WYSIWYG  editor  is  not  as  feature 
rich  as  that  of  Mambo  or  Joomla,  the  plethora  of  options  make 
up  for  it. 

o  The  Theme  Manager  is  another  useful  feature  el07  offers.  It  is 
one  of  the  few  theme  managers  that  provides  a  thumbnail  view 
of  the  theme.  Though  it's  a  simple  feature,  many  CMSes  miss  it. 

o  el07  offers  a  Banner  Rotation  system  for  the  advertisements  on 
your  site.  There  are  various  options  relating  to  banner  display, 
which  are  very  useful  in  daily  use. 

o  The  Download  Manager  is  again  a  very  useful  feature.  You  can 
categorise  downloads,  set  or  update  limits,  create  mirrors  and 
do  much  more! 

In  addition  to  the  above  features,  various  forum  systems  can  be 
integrated  with  el07  using  plugins  available  on  their  site.  Overall, 
el07  is  one  of  the  best  CMSes  available  with  several  unique  features. 

8.10.3  Installation 

1.  Download  the  latest  version  of  el07  from  http://el07.org.  You 
will  need  to  extract  the  el07  archive.  You  can  use  WinZip  or 
WinRar  for  this  purpose. 

2.  After  you  extract  the  archive,  copy  the  extracted  contents  to  a 
new  folder  called  "el07".  Place  this  folder  in  the  "www"  direc- 
tory in  C:\Program  Files\EasyPHPx-x\. 

3.  Installation  from  here  becomes  pretty  simple.  Point  your  brows- 
er to  http://localhost/el07/  and  you  will  be  presented  with  an 
installation  Wizard.  Select  your  language  and  click  Next. 
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Enter  your  server  details  here 


4.  In  this  step,  you  will 
have  to  enter  details 
about  your  server.  In  the 
MySQL  Username  field, 
enter  "root",  and  leave 
the  MySQL  password 
field  blank.  MySQL 
Database  will  be 
"el07db",  and  check  the 
"Create"  box  next  to  this 
field.  Click  Continue  at 
the  bottom  of  the  page. 

5.  After  running  an  instal- 
lation check,  the 
installer  will  ask  you  for 
the  Administrator 
account  details.  Enter 
your  details  and  click 
Continue.  However,  do 
remember  the  informa- 
tion you  entered,  as  this 
account  will  be  used  for 
managing  your  site. 

6.  If  you  entered  all  the  information  correctly,  the  installation  part 
will  be  complete.  You  will  be  re-directed  to  your  el07  Web  site. 
Go  ahead  and  customise  it! 


8.10.4  Resources 

There  are  quite  a  few  sites 
offering  themes,  modifica- 
tions and  other  utilities 
for  el07. 

http://el07themes.com 
offers  a  variety  of  free,  ele- 
gant themes  for  el07. 


Remember  the  Admin  details  you  enter  here 


Your  ready-to-go  el07  Web  site! 
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www.el07coders.org  is  dedicated  to  the  discussion  and  cre- 
ation of  plugins  for  the  el07  CMS. 

www.el07hacks.org  is  a  site  that  features  useful  modules  and 
utilities  for  el07. 

www.el07uk.co.uk  is  the  UK  community  Web  site  for  this  CMS. 

8.11  DragonFly  CMS 


8.11.1  Introduction 

DragonFly  is  another  impressive  open  source  CMS.  It  was  previ- 
ously named  CPG-Nuke.  In  those  days,  it  was  based  on  PHP-Nuke 
6.x.  The  development  team  has  spent  quite  a  bit  of  time  improving 
the  features  and  further  optimising  the  CMS.  It  is  developed  by  an 
independent  group  of  developers,  and  is  offered  for  free  on  cgp- 
nuke.com.  The  current  version  is  9.0.6.1,  and  it  is  licensed  under 
the  terms  of  the  GPL.  The  basic  structure  of  PHP-Nuke  is  still 
retained,  though  it  is  comes  with  a  completely  new  cache  system, 
a  revamped  theme  system  and  a  complete  code  rewrite.  In  the 
early  days,  it  featured  the  Coppermine  Photo  Gallery— hence  the 
name  CPG-Nuke.  The  requirements  include  PHP4,  MySQL  4.x  or 
5.x/PostgreSQL  though  support  for  PostgreSQL  is  still  in  an  experi- 
mental stage.  The  developers  recommend  using  Apache  Web  serv- 
er, but  other  Web  servers  are  supported  too. 

8.11.2  Features 

Being  originally  based  on  PHP-Nuke,  DragonFly  shares  quite  a  few 
features  with  the  former. 

o  One  of  the  best  features  of  DragonFly  is  the  integration  with  the 
Coppermine  Photo  Gallery.  Coppermine  is  considered  to  be  the 
best  and  most  flexible  photo  gallery  and  this  offers  a  distinct 
advantage  to  DragonFly. 

o  DragonFly  has  a  site-wide  Cache-Based  Template  System,  which 
improves  performance  on  busy  sites. 

o  DragonFly  also  features  an  integrated  bulletin  board  system  pow- 
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ered  by  PhpBB2.  As  with  Coppermine,  Dragonfly  integrates  its 
theme  into  PhpBB,  which  is  an  excellent  feature, 
o  The  developers  claim  that  Dragonfly  uses  as  much  as  50  per 
cent  fewer  database  queries  as  compared  to  other  PHP-Nuke 
derivatives. 

o  The  News  Administration  system  in  DragonFly  is  a  huge  improve- 
ment over  PHP-Nuke  and  offers  various  options  such  as  adding 
of  BBCode,  HTML,  Flash  content,  and  even  video  files! 

8.11.3  Installation 

1.  Download  the  latest  version  of  DragonFly  from 
http://www.cpgnuke  .com.  You  will  need  WinRar  to  extract  the 
tar.gz  archive  on  Windows. 

2.  After  you  extract  the 
archive,  you  will  get  two 
folders:  "documenta- 
tion" and  "public_ 
html".  Copy  the  con- 
tents of  the  "public_ 
html"  folder  to  a  new 
folder  called  "dragon".  The  DragonFly  Installer 
Place  this  folder  in  the 

"www"  directory  in  C:\Program  Files\EasyPHPx-x\. 

3.  You  will  need  to  create  a  database  for  DragonFly.  Log  in  into 
PhpMyAdmin  by  going  to  http://localhost/mysql/.  In  the  main 
PhpMyAdmin  menu,  under  "Create  new  database",  enter  the 
database  name  "dragondb"  and  click  on  "Create". 

4.  In  this  step,  you  will  have  to  edit  the  configuration  file  to  enter 
details  about  your  server.  Go  to  C:\Program  Files\EasyPHPx- 
x\www\dragon\  and  edit  the  file  config.php.  Enter  "dragondb" 
for  Sdbname.  Under  Sdbuname,  enter  "root",  since  it  is  your 
PhpMyAdmin  username.  Let  the  Sdbpass  field  remain  blank. 

5.  The  difficult  part  is  over.  Now  point  your  browser  to  http://local- 
host/dragon/install.php.  The  installer  will  run  a  pre-installation 
check.  Click  on  "Let's  build  the  database"  to  continue. 
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6.  After  creating  the  database  tables,  the  installer  will  present  a 
page  where  you  will  need  to  enter  information  to  personalise 
your  installation.  Enter  the  site  name,  administrator  e-mail  and 
your  domain  name  ("localhost"  while  installing  under  EasyPHP). 
Leave  the  other  fields  at  their  default  values. 

7.  In  the  next  step,  you  will  have  to  enter  your  administrator 
account  details.  Do  remember  the  information  you  enter,  as  this 
account  will  be  used  to  manage  your  Web  site. 

8.  If  all  goes  well,  your  DragonFly  installation  will  be  complete.  Go 
to  http://localhost/dragon/admin.php  to  modify  your  Web  site. 

8.11.4  Resources 

DragonFly  is  a  relatively  new  CMS,  and  the  modifications  available 
for  it  are  not  as  many  as  those  available  for  the  more  popular  CMSes. 

DFMods.com  is  a  site  that  offers  modifications  and  add-ons. 

A  lot  of  nifty  and  powerful  add-ons  for  DragonFly  are  available 
at  DFAddons.com 

DFwiki.com  is  a  place  to  get  tools,  tricks  and  tutorials  on  the 
installation,  administration  and  day-to-day  use  of  DragonFly. 

8.12  CivicSpace 


8.12.1  Introduction 

CivicSpace  is  a  very  interesting  CMS.  It  was  formerly  known  as 
DeanSpace  and  Hack4Deam.  The  interesting  part  of  this  CMS  is 
that  it  was  developed  to  power  Web  sites  supporting  the 
Presidential  Candidature  of  Howard  Dean  in  2004. 

CivicSpace  is  based  on  Drupal,  which  has  been  under  develop- 
ment for  more  than  four  years  by  a  community  of  independent 
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developers.  It  is  developed 
and  maintained  by 
CivicSpace  Labs;  the  current 
version  is  0.8.4.  CivicSpace 
can  be  freely  downloaded 
from  civicspacelabs.org,  and 
is  licensed  under  the  terms 
of  the  GPL. 


CivicSpace  requires 
Apache  HTTP  server  1.3, 
MySQL  4.0.x  or  4.1.x,  and 
PHP  4.3.3  or  greater. 

8.12.2  Features 

Being  based  on  Drupal,  CivicSpace  shares  quite  a  few  features  with 
it.  However,  as  mentioned  above,  CivicSpace  has  been  customised, 
and  offers  some  unique  features. 

o  CivicSpace  is  pretty  much  the  only  CMS  that  allows  you  to  chose 
Site  Profiles— that  is,  you  can  chose  between  options  like  a  polit- 
ical platform,  a  personal  Web  site  or  a  community  Web  site. 
Your  installation  will  be  correspondingly  customised. 

o  CivicSpace  is  a  powerful  Blogging  tool.  It  includes  all  the  fea- 
tures you  would  expect  of  a  good  WYSIWYG  editor  and  it  also 
includes  options  to  let  your  users  create  their  own  blogs  and 
maintain  them. 

o  A  fully-featured  Forum  system  is  integrated  into  CivicSpace. 

People  who  would  want  to  provide  basic  support  to  customers 

on  their  site  will  find  this  feature  useful, 
o  Like  DragonFly,  CivicSpace  offers  a  Photo  Gallery  system.  You  can 

also  let  your  users  build  and  maintain  their  own  galleries, 
o  Another  unique  feature  of  CivicSpace  is  that  it  allows  users  to 

post  content  through  blogging  clients,  which  support  XML-RPC 

Blog  APIs.  So,  all  you  Flock  users  can  now  post  news  on  your  site 

without  even  logging  on  to  it! 


n  s 

®  # 

m  it 

P 

The  Admin  menu  looks  similar  to  that  of 
PHP-Nuke 
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8.12.3  Installation 

1.  Download  the  latest  version  of  CivicSpace  from  www.civicspace- 
labs.org.  The  CivicSpace  archive  comes  in  the  .tgz  format.  We 
recommend  you  use  WinRar  for  extracting  this  archive. 

2.  After  extracting  the  archive,  copy  the  extracted  files  and  folders 
to  a  new  folder  called  "civic".  Place  this  folder  in  the  "www" 
directory  in  C:\Program  Files\EasyPHPx-x\.  Now,  point  your 
browser  to  http://localhost/mysql/  to  log  in  to  PhpMyAdmin.  In 
the  main  PhpMyAdmin  menu,  under  "Create  new  database", 
enter  the  database  name  "civicdb"  and  click  on  "Create". 

3.  Point  your  browser  to  http://localhost/civic/install.php.  The 
installer  will  give  you  an  introduction  to  CivicSpace.  Click  on 
Begin  Installation  to  proceed  to  the  next  step.  The  installer  will 
run  a  pre-installation  check.  Click  Install  to  proceed  further. 

4.  In  this  step,  you  will  get  the  option 
of  either  selecting  a  "Single  site 
setup"  or  "Multiple  site  setup". 
Select  "Single  site  setup".  Check 
"Enable  CiviContribute"  if  you 
want  to  use  CiviCRM,  which  is  an 
open  source  CMS  primarily  used  for 
fund  raising.  We  will  not  enable 
CiviCRM  for  now.  Click  on  "Setup 
database"  to  continue. 


5.  Now,  you  will  be  asked  to  enter  the 
database  details.  Under  the  user- 
name  field,  enter  "root"  and  leave  the  Password  field  blank. 
Enter  "civicdb"  as  the  Database  Name.  As  we  will  not  be 
installing  CiviCRM,  we  will  ignore  its  settings.  After  this,  click 
Create  Tables  to  continue. 

6.  After  installing  the  tables,  the  installer  will  run  a  check  for  file 
permissions.  It  will  give  a  few  warnings  about  files  being 


Enter  your  server  details  with 
care 
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"writable".  Ignore  that,  since  we 
are  installing  on  our  local  server. 
Click  on  "Skip  these  checks"  to 
continue. 

7.  You  will  now  be  taken  to  the 
Civicspace  Configuration  Wizard. 
In  the  menu  on  the  left  hand  side, 
click  on  "Administrator"  and  enter 
the  details  to  create  an  admin 
account.  Click  on  "Basic  Settings" 
to  personalise  your  instal- 
lation. Click  Next  to  com- 
plete your  installation. 

8.  Point  your  browser  to 
http://localhost/civic/  to 
view  your  own  CivicSpace 

installation.  Enter  your    Wajt!  isn't  this  Drupal's  admin  menu? 

login  details  and  modify 
your  installation  of  CivicSpace! 


The  unique  CivicSpace 
configuration  utility 


8.12.4  Resources 

Since  CivicSpace  is  still  under  development,  third-party  sites  do 
not  provide  modules,  themes  and  other  add-ons  yet.  However,  a  lot 
of  popular  sites  use  CivicSpace  due  to  its  fancy  background. 

www.BetterDonkey.org  is  a  site  that  fights  for  progressive 
change  in  Seattle.  It  is  powered  by  CivicSpace  and  shows  the  flexi- 
bility of  the  interface. 

Another  site  based  on  CivicSpace  is  www.MontclairPost.com, 
an  independent  forum  operated  by  the  members  of  the  Montclair 
Community. 

www.Rideforworldhealth.org  is  another  elegant  site  based  on 
CivicSpace  for  raising  awareness  of  global  health  issues. 
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www.ConsultantCommons.org  is  a  site  powered  by  CivicSpace.  It 
is  a  community  site  for  providing  non-profit  technology  support. 

Another  impressive  site  based  on  CivicSpace  is  www.OC- 
Tech.org. 

8.13  How  To  Move  Your  Site  To  The  Web 
Server 


So,  you've  modified  your  CMS  installation  and  ironed  out  the  last 
bug?  Now,  you  will  have  to  transfer  your  Web  site  to  your  Web  serv- 
er so  that  your  clients  can  view  it.  Transferring  your  Web  site  to 
your  hosting  account  is  pretty  simple. 

1.  First  and  foremost,  upload  the  whole  CMS  folder  structure  as  it 
is.  If  you  are  using  Joomla,  then  upload  the  entire  "joomla"  fold- 
er to  your  Web  server. 

2.  At  this  point,  you'll  have  to  take  a  backup  of  your  database  from 
PhpMyAdmin. 

3.  Now,  point  your  browser  to  http://localhost/mysql/  to  log  into 
PhpMyAdmin.  In  PhpMyAdmin,  select  your  database.  Under 
your  database,  click  on  "Export"  in  the  top  menu  bar.  This  is  the 
tab  next  to  "SQL".  You  will  see  a  box  containing  a  list  of  all  tables 
in  the  database.  Select  all  the  tables.  Under  the  "Structure" 
option,  check  the  "Add  Drop  Table"  box. 

4.  Now,  enter  the  name  of  the  backup  file  you  would  like,  in  "File 
Name  template".  Under  "Compression",  check  the  "gzipped" 
box.  Click  Go. 

5.  Save  the  database  file  on  your  computer.  We  discussed  how  to 
run  a  set  of  SQL  queries  in  PhpMyAdmin  under  the  PHP-Nuke 
installation.  Install  the  database  file  you  just  saved  onto  your 
Web  server's  MySQL  database  in  a  similar  manner. 
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6.  Next,  you  will  have  to  edit  the  configuration  file  of  your  CMS 
and  change  the  database  name,  username,  password,  and  so  on 
to  those  provided  by  your  Web  host.  We've  already  discussed 
how  to  edit  a  configuration  file  in  the  installation  guides  above. 
The  list  of  files  to  be  edited  for  the  different  CMSes  is  in  the 
Notes  section  (§8.13.1) 

8.13.1  Notes 

CMS  File  to  be  edited 


PHP-Nuke  config.php 

Mambo  configuration.php 

PostNuke  config.php 

Joomla  configuration.php 

Drupal  settings  .php  located  in  /sites/default/ 

XOOPS  mainfile.php 

PHP-Fusion  config.php 

E107  el07_config.php 

DragonFly  config.php 

CivicSpace  settings  .php  located  in  /sites/default/ 


Unless  specifically  mentioned,  all  configuration  files  are  locat- 
ed in  the  root  folder  of  your  CMS  installation. 

8.14  A  Few  Wise  Words 

So  you've  uploaded  your  site,  and  it  is  up  and  running.  Hopefully, 
you'll  be  getting  good  traffic.  But  do  remember  to  install  the 
updates  that  the  developers  release  from  time  to  time.  Most  of 
these  updates  are  security-related,  and  if  you  don't  install  these, 
you  run  a  risk  of  exposing  your  Web  site  to  the  baddies  of  the 
Internet.  All  the  best  with  your  new  site! 
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A Web  site  seems  really  professionally  done  once  it  has  a  forum- 
regardless  of  what  people  post!  Here,  we  talk  about  the 
importance  and  role  of  forums,  and  some  popular  forum 
packages.  We  also  tell  you  how  to  set  up  the  forum  on  your  site 
using  these  tools. 
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9.1  The  Value  Of  Forums 


Forums  are  one  of  the  most  popular  forms  of  online  communica- 
tion and  idea  sharing.  A  forum  is,  very  simply  put,  a  sort  of  group 
discussion  carried  on  online,  the  participants  of  which  form  a 
community  with  common  interests.  A  forum  has  no  rigorous 
organisation,  and  is  the  sum  total  of  its  members'  contributions. 
The  beauty  of  a  forum  is  that  it  can  be  specific  or  general;  forums 
have  topic  heads,  where  varying  subjects  can  be  discussed,  but 
under  the  proper  category.  Without  actually  having  to  leave  the 
safe  realm  of  your  desktop,  you  could  exchange  shooting  tips  with 
a  photographer  from  the  US  and  another  from  Germany,  for  exam- 
ple. Today  there  are  thousands  of  forums  up  and  running,  with 
members  running  into  the  millions! 

Nobody  today  can  afford  to  miss  out  on  the  forum  fever  that's 
gripping  a  sizable  chunk  of  the  online  community.  Some  manu- 
facturers also  have  separate  forums  on  their  Web  sites;  hardcore 
hardware  testing  authorities  such  as  Tomshardware 
(www.tomshardware.com),  Hard  OCP  (www.hardocp.com),  and 
Guru  3D  (www.guru3d.com)  all  have  dedicated  forums  where  vis- 
itors can  become  members  and  post  queries  or  display  their  over- 
clocked  rigs.  Almost  every  niche  Web  site  will  have  a  dedicated 
forum,  and  you  can  find  a  forum  to  cater  to  almost  any  like,  from 
cooking  to  biking  to  home  decorating.  People  become  members  of 
forums  because  they  have  interests  in  common,  and  can  exchange 
ideas  or  views  about  a  specific  topic— a  so  called  "expert  opinion," 
if  helpful,  will  garner  respect  for  the  poster  of  the  tip. 

There  are  also  quite  a  few  forums  around  that  organise  meets 
for  members  of  say,  a  particular  city,  and  members  are  also  free  to 
exchange  personal  information,  although  privately— that  is,  usual- 
ly not  on  the  forum  posts  themselves. 

People,  therefore,  can  not  only  make  friends  online,  but  also 
learn  and  further  the  knowledge  in  their  fields  of  interest.  If  a  per- 
son is  interested  in  biking  and  computer  hardware,  there  will,  of 
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course,  be  a  limit  to  the  amount  of  knowledge  he  can  gain  hands- 
on  and  in  his  city.  If  this  person  were  to  register  on  forums,  his  bik- 
ing and  computing  experience  is  so  much  the  richer.  He  not  only 
has  access  to  tips  and  tricks  that  members  will  contribute,  but  can 
learn  from  the  experiences  of  others,  get  insights  into  what  he  can 
do  better  and  how,  perhaps  learn  something  new,  and  make  like- 
minded  friends  in  the  bargain.  To  top  it  off,  forums  are  free,  as  the 
saying  goes  about  some  of  the  best  things  in  life! 

Another  example:  our  very  own  www.thinkdigit.com/forum 
has  members  as  diverse  as  you  can  get— techy  geeks,  total  newbies, 
office-goers  looking  to  enhance  productivity,  people  looking  for  a 
single  solution,  and  so  on. 

Arguments  fly  back  and  forth:  why  substitute  the  real  thing  for 
an  online  personality?  Forums  feature  more  informed  human 
beings!  If  knowledge  does  equate  to  power,  well,  read  on! 

9.2  Classification  Of  People  On  A  Forum 


Most  people  join  forums  to  share  experiences,  whether  general  or 
subjective.  The  simple  fact  is  that  a  forum  is  an  extension  of  one 
of  our  most  important  necessities— the  necessity  to  communicate: 
our  ideas,  plans,  expertise  and  dreams.  The  urge  to  socialise  is 
inherent  in  all  of  us.  Forums  simply  extend  that  sociable  instinct 
online,  where  there  is  a  virtually  infinite  audience,  who  partici- 
pate equally— or  not  so! 

Being  an  extension  of  a  society— a  sort  of  online  society— a 
forum  has  to  have  an  order  of  hierarchy.  As  in  real  life,  some  form 
of  governance  has  to  prevail,  else  chaos  will  ensue.  Taking  a  hard- 
core PC  enthusiast  forum  as  an  example,  a  distinction  can  be 
made  based  on  the  regularity  of  contributions,  and  of  course  the 
know-how  of  the  contributor,  as  below. 
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1.  Moderators/Administrators:  View  these  as  the  mayors  and  gov- 
ernors. They  have  extra  rights  and  can  ban  people  based  on  their 
activities;  they  basically  control  the  forum,  and  are  supposed  to 
be  impartial 

2.  Forum  addicts:  The  hardcore  enthusiasts  who  live  and  breathe 
online.  They  may  be  on  several  forums  simultaneously,  posting 
away  to  glory 

3.  Regulars:  The  guys/girls  who  make  posting  on  a  forum  a  regular 
affair,  generally  log  on  every  day,  and  are  healthy  contributors 

4.  Occasional  visitors:  Members  who  maybe  online  sporadically,  may 
log  in  as  often  as  twice  a  week,  or  as  infrequently  as  once  a  month 

5.  Troublemakers:  The  outlaws  of  the  forum,  generally  very 
active— even  causing  trouble  is  hard  work,  isn't  it?  The  Mods  are 
always  on  the  lookout  to  bust  such  people.  Some  may  have  great 
subject  knowledge,  but  just  rebel  against  convention. 

6.  One-time  visitors:  Such  members  post  just  once,  to  solve  a  prob- 
lem or  gain  some  insight.  Not  considered  to  be  members  by  the 
enthusiast  and  troublemaker  categories,  who  take  the  pains  to 
contribute  regularly. 

If  you  have  a  Web  site  with  lots  of— and  possibly  diverse— con- 
tent, it's  probably  a  very  good  idea  to  have  a  forum  on  it.  This  will 
dramatically  increase  traffic  to  your  site,  and  apart  from  that, 
make  for  a  more  "complete"  Web  site  experience. 

9.3  Forum  Packages 


Let's  get  going  with  installing  and  getting  your  very  own  forum  up 
and  running.  Here  are  some  of  the  most  popular  forum  packages 
for  your  Web  site: 

1.  vBulletin 

2.  PHPBB 

3.Invision  Power  Board 

4.SMF  (Simple  Machines  Forum) 

5.  Vanilla 


164 


SMI  FAST  TRACK 


WEB  DESIGN 


FORUMS 


IX 


9.3.1  vBulletin 

vBulletin  is  a  great  forum  package— one  of  the  most  popular  forum 
packages,  which  is  surprisingly  efficient  as  well.  It's  been  written 
completely  in  PHP.  The  backend  database  uses  MySQL.  Some  of  the 
salient  features  of  V  Bulletin: 

1.  It's  scalable,  and  the  database  server  and  Web  servers  can  be  dis- 
crete machines. 

2.  Utilises  MySQL  as  a  backend,  which  is  ultra-light  on  resources 
and  hence  fast. 

3.  All  the  advantages  of  PHP,  that  is,  platform  independence,  cross- 
platform,  and  so  on.  In  fact,  the  main  advantage  is  that  it  shares 
a  very  significant  trait  with  PHP— efficiency. 

4.  Advanced  features  for  threads  such  as  active  users  thread  show- 
ing, new  post  indicator  via  PM,  thread  subscribing,  post  rating 
and  polling,  advanced  admin  tools  for  threads  such  as  move, 
edit,  delete,  lock,  quick  replies,  post  previews,  advanced  text 
and  MM  signatures,  extended  smileys,  and  avatars. 

vBulletin  is  paid  software;  a  license  costs  $160  (Approx  Rs. 
7200).  It's  available  for  download  once  you've  paid  and  registered, 
with  easy-to-follow  steps  in  the  online  help  file.  You  will  need  to 
visit  the  members  area,  http://members.vbulletin.com,  which 
should  provide  adequate  support  for  even  first-time  users. 

Once  the  archive  has  downloaded,  you  simply  extract  it.  Note 
that  at  this  point  you'll  need  to  have  Easy  PHP  installed— or  PHP, 
MySQL  and  Apache  individually.  You  should  now  see  two  folders  in 
your  vBulletin  directory,  namely  "do_not_upload"  and  "upload". 
The  "upload"  folder  contains  the  files  to  be  uploaded  to  your  Web 
server.  Before  uploading,  rename  the  config.php.new  file  in  the 
"includes"  folder  to  "config.php".  The  "do_not_upload"  folder  con- 
tains tools  that  allow  you  to  perform  tasks  on  the  board.  There  is 
a  "tools.php"  that  has  to  be  uploaded  to  the  "admincp"  folder.  This 
is  an  emergency-use  only  file,  and  should  be  deleted  immediately 
after  use  or  it  will  cause  a  severe  security  problem. 
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The  "config.php"  file  is  the  mediator  between  vBulletin  and 
your  Web  server.  Any  changes  you  want  can  be  made  here.  Be  care- 
ful though:  we  strongly  advise  you  keep  a  backup  of  this  file  in 
case  things  go  wrong. 

Similarly,  you  can  edit  the  Technical  Email  Address,  Master 
Database  Server  Name  &  Port,  and  the  Master  Database  User  Name  and 
Password.  Note  that  we  haven't  touched  the  "Slave  Database 
Configuration,"  assuming  there's  a  single  backend  database. 

After  editing,  the  config  file  has  to  be  uploaded  to  your  Web 
server.  Using  Smart  FTP,  which  is  a  free  software  available  from 
www.download.com/3001-2160_4-10543387.html,  you  can  simply 
drag  or  copy  and  paste  the  entire  "upload"  folder  to  your  Web 
Server.  After  uploading,  you  can  rename  the  "upload"  folder  on 
the  Web  Server  to  whatever  you  want. 


We  used  vBulletin  on  the  same 
machine,  that  is,  our  Web  server 
and  database  server  were  the  same. 
If  you're  planning  on  doing  some- 
thing similar,  all  you  need  to  do  is 
copy  the  entire  contents  of  the 
"upload"  directory  to  the  "www" 
folder  in  your  PHP  install  directory. 


Here's  what  you  get  the  first  time 
vBulletin  is  run 


Now  we  need  to  actually  do 
the  vBulletin  setup,  which  will 
be  accomplished  by  typing  in  the 
full  path  of  the  "install.php"  file 
in  your  browser  window.  For  the 
example,  we  have  used  we  used 
"http://localb.ost/VB/install/ 
install.php";  once  the  install  file 
runs,  you  will  have  to  enter  your 
registration  number,  after  which 
there  are  12  easy-to-follow  steps, 


Step  3,  showing  the  creating  of  the 
various  tables  used  by  vBulletin 
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wherein  the  actual  setup  is  tuned  according  to  your  specific 
needs.  Very  little  user  input  is  required,  and  installation  should 
be  a  breeze. 


In  step  9,  we  input  some 
very  basic  data  that  largely 
configures  what's  displayed 
on  every  page  of  the 
forum— such  as  your  title- 
board,  homepage,  and 
Webmaster  e-mail  address. 


Just  before  the  last  stage 

,  In  step  9,  you  configure  what  is  displayed  on 

is  complete,  it  is  mandatory  every  pag£  Qf  thfi  fQrum 

for  you  to  delete  the  "con- 

fig.php"  file  in  the  /vb/install  directory.  In  fact,  the  process  will  not 
complete  for  security  reasons  until  you  manually  delete  this  file. 


In  the  screenshot  along- 
side, we  supplied  an 
Administrator  username 
and  password,  which 
should  be  carefully  guard- 
ed, and  even  more  so, 
remembered— you  get  only 
five  chances  to  enter  these 
fields  correctly,  after  which 
you'll  be  unable  to  log  in  for 
15  minutes! 


The  Administrator  setup.  Don't  forget  the 
username  and  password! 


Once  you  log  in  using  the  user- 
name  and  password  you  defined  ear- 
lier, you  will  be  greeted  with  a  wel- 
come window,  which  takes  a  second 
to  redirect  you  to  your  forum's  home- 
page. You  can  now  create  a  test  post. 
vBulletin  is  successfully  installed! 


Your  first  post! 


SEE  FAST  TRACK 


167 


IX 


FORUMS 


WEB  DESIGN 


9.3.2  PHPBB  (PHP  Bulletin  Board) 

Like  vBulletin,  PHPBB  is  PHP-based,  as  the  name  suggests.  It  is  also 
open  source,  meaning  improvements  are  always  a  work  in 
progress.  Flexibility  in  the  backend  is  a  plus  point  for  PHPBB, 
wherein  a  gamut  of  choices  are  available  from  the  now  familiar 
MySQL,  to  MS  SQL  or  even  Access/ODBC  database  servers. 

The  best  part  of  PHPBB  is  that  it's  Igghj^ 
a  free  download;  we've  saved  you  the 
trouble— find  it  on  this  month's  DVD. 
After  downloading  it,  unpack  and 
copy  and  paste  the  entire  "PHPBB"  ^^^^ 
folder  to  your  "www"  folder.  You  can 
now    type    in  "http://localhost/ 


PHPBB  installation  is  a  snap 

phpBB/install/  install.php",  and  the 

setup  will  initialise.  PHPBB  installation  is  very  fast— no  lengthy 
steps.  All  you  need  to  do  is  enter  the  data  as  we  have  done  in  the 
screenshot  above  and  click  Start  Install.  Once  it's  installed  you  need 
to  log  in,  for  which  you  will  be  prompted  for  the  Administrator  user- 
name  and  password. 

There  is  a  mod  for  PHPBB  called  EasyMOD— a  must-have  if  your 
forum  runs  on  PHPBB,  because  it  simplifies  the  installation  of  fur- 
ther mods,  by  replacing  the  interface  with  an  ease-to-use  graphical 
interface. 


f^fc.phpBH 


m  i.^'jL'iKillll^ 


Once  you  get  the  install  window 

alongside,  select  "This  is  a  Windows 

Server",  since  our  web  server  is  on 

the  same  machine  as  our  database, 

so  no  FTP  is  required.  Selecting  FTP 

will  bring  up  another  window, 

where  the  FTP  settings  need  to  be 
entered  EasyMOD  eases  the  installation 

of  later  mods 

Note  that  the  window  shown  to  the  right  on  the  next  page  is  an 
alternative  to  the  one  on  the  left;  if  you  choose  "I  have  ftp  access  to 
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Easy  Mod's  install  window 
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Easy  Mod  has  a  lot  of  ftp  settings 


Easy  Mod  has  been  successfully 
installed 


my  PHPBB  files"  in  the  step  above, 
only  then  will  you  get  this  window. 

After  this  step,  you  simply  need 
to  enter  an  EM  password  and  con- 
firm it.  Click  and  you're  done! 

9.3.3  SMF  (Simple  Machines  Forum) 

This  is  another  free  forum 
package  based  on  the  ultra- 
light and  powerful  PHP  lan- 
guage, which  uses  MySQL  as 
a  backend.  It  owes  its  ori- 
gins to  replacing  YaBB  SE,  a 
popular  forum  package 
that  ran  into  problems 
mainly  due  to  resource  allo- 
cation. YaBB  SE  was  the  PHP 
port  of  YaBB,  but  suffered 

the  familiar  teething  problems  that  most  "first-time"  software 
packages  invariably  contain.  We  won't  go  into  the  benefits  of  PHP 
all  over  again;  significantly,  SMF  will  always  remain  free,  only  the 
license  doesn't  permit  removal  of  the  copyright  notice.  Big  deal! 


The  install  window  of  SMF 


We  have  provided  a  copy  of  SMF  on  our  DVD  this  month.  Or, 
you  can  find  it  at  www.simplemachines.  org.  Simply  unzip  it  to  a 
folder  titled  "SMF"  (you  can  use  whatever  name  you  want).  Now 
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the  entire  folder  is  to  be 
copied  to  the  "www"  folder 
inside  EasyPHP.  Using 
"localhost/  SMF"  (where 
SMF  is  the  name  of  your 
Small  Machines  Forum 
directory),  you  should  get 
your  install  window,  which 
will  look  something  like 
the  screenshot  on  the  previ- 
ous page. 

The  next  window  is 
where  you  need  to  create  an 
Administrator  account- 
pretty  simple  really:  you 
need  to  enter  your  user- 
name,  password,  and  a  valid 
e-mail  address.  Also  notice 
that  the  MySQL  database 
password  is  required,  mean- 
ing that  unless  you  know  the 
password  for  the  database, 
you  cannot  create  an 
Administrator  account— for 
obvious  security  reasons.  An 
admin  should,  after  all, 
know  his  database  password! 


Creating  an  account  in  SMF 


Our  new  forum-looks  nice,  doesn't  it? 


Here's  where  the  admin  controls 


Note    that    SMF  very 
helpfully  allows  you   to  everything! 
delete  the  install. php  file; 
simply  selecting  it  as  an 

option  does  this.  Contrast  this  with  vBulletin  and  PHPBB, 
where  you  actually  need  to  manually  delete  the  install.php  file. 
Simply  click  on  the  link  "Your  newly  installed  forum",  and 
voila— your  forum  homepage  appears! 
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Clicking  on  your  admin  link  will  take  you  to  the  Administrator 
pane.  Note  here  that  in  a  small  window  you  can  see  the  current 
SMF  version.  This  is  the  Administrator's  playground  from  where 
permissions  can  be  allowed  or  denied,  threads  created  or  deleted, 
registering  and  deleting  of  members  achieved,  and  where  the 
admin  exercises  all  those  superpowers  we've  always  associated 
admins  with! 


9.3.4  Vanilla 

Finally,  we  take  a  look  at  something  relatively  new,  something 
small,  built  using  PHP  and  of  course  MySQL:  introducing  Vanilla, 
which  is  100%  free  and  100%  open  source.  We've  provided  a  copy  of 
Vanilla  on  the  CD  to  get  you  started.  It's  also  available  at  http://get- 
vanilla.  com. 


Download  the  .zip  file, 
extract  it,  and  copy  the 
entire  folder  (assuming 
you've  named  it  "Vanilla") 
to  your  "www"  folder.  In 
your  Web  browser,  you 
need  to  type  in  the  path  to 
the  "installer.php"  file, 
which  should  be  in  the 
Vanilla  root  directory.  But 
there's  a  catch  here. 
Vanilla  actually  needs  you 
to  create  a  database  first 
manually,  unlike  the  other 
forum  packages  we've 
mentioned  here.  For  this, 
go  to  EasyPHP  on  your 
taskbar,  right-click  > 
Administration  >  Manage 
database,  and  from  here 
the  window  will  look  like 
the  screenshot  alongside. 


liycHH  In  phpHyMmin 
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Creating  a  database  for  Vanilla 


A  database  called  Vanilla  has  just  been 
created 
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Once  the  "installer, 
php"  file  is  run,  your  first 
window  will  look  like  the 
screenshot  alongside. 

You  now  need  to  enter 
the  SQL  Server  name 
("localhost"  in  our  case), 
while  the  database  name 
will  be  "vanilla"  (as  we 
specified  during  creation). 
Finally,  you  come  to  the 
Administrator  setup, 
where  you  need  to  specify 
your  admin  username  and 
password,  along  with 
other  details. 

You'll  now  be  taken  to 
the  forum  window. 
Explore  a  bit:  you'll  find 
the  settings  window  quite 
interesting— lots  of  power- 
ful options  available  here! 
Another  popular  forum 
package  is  IPB  (Invision 
Power  Board),  the  license 
for  which  costs  $185 
(Rs  8,300). 


The  installer  file  being  executed  from  your 
browser  window 


VuriU  InHil^nn  Wind  <SLV  3  if  J) 
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Here's  where  you  set  up  the  Administrator 
account 


Your  new  playground:  the  admin  settings 
panel 


There  you  have  it.  The  tools  may  be  different— take  your  pick- 
but  creating  your  own  forum  was  never  easier! 
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Finishing  Up 


In  the  previous  chapters,  you've  learnt  how  to  build  sites.  Since 
you've  done  all  that  on  your  local  machine,  it's  time  to  upload  it 
all  and  test  it.  In  this  chapter  we'll  show  you  how  you  should  go 
about  making  your  site  go  out  live  to  the  world  and  then  testing  it 
to  make  sure  everything  works.  We'll  also  give  you  a  little  insight 
into  how  to  make  Google  love  you,  and  more! 
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Once  you're  all  done  designing  your  site— whether  it's  HTML-based 
or  runs  off  of  a  complete  content  management  system— it's  time  to 
let  the  world  see  it.  Very  few  of  us  have  broadband-enabled  servers 
or  computers  that  are  always-on,  so  you're  probably  not  going  to 
be  able  to  run  the  site  off  your  own  computer.  A  lot  of  us  want  to 
be  able  to,  however,  so  let's  first  look  at  what  we  need  in  order  to 
be  able  to  host  our  own  sites  on  our  PCs. 

10.1.1  What  you  need 

In  order  to  host  your  own 
site,  you  will  need  to  have 
a  computer  with  a  decent 
configuration,  decide  on  a 
suitable  operating  system, 
Web  server  software  and, 
of  course,  a  broadband 
pipe  that  has  at  least  256 
kilobits  per  second  upload 
speeds— anything  slower 
and  your  site  is  going  to 
crawl!  Most  ISPs  in  India  are  offering  256  Kbps  connections,  but 
this  is  the  maximum  download  speed  you  will  get,  not  the  upload 
speed.  You  can  either  ask  your  ISP  what  the  cap  on  your  upload 
speeds  is,  or  just  run  one  of  the  many  bandwidth  tests  we  will  talk 
about  a  little  later  on.  For  now,  you  can  go  to  www.bandwidth- 
place.  com  and  run  their  speed  test. 

We  have  come  across  instances  where  ISPs  only  put  a  cap  on 
your  download  speeds  and  leave  the  upload  speeds  open  as  per 
usage.  What  this  means  is  that  although  some  of  you  might  have 
a  speed  cap  of  256  kbps  in  terms  of  downloads,  you  might  find 
that  your  uploads  are  unrestricted.  Don't  count  on  this  happen- 
ing, though:  most  ISPs  restrict  both  upload  and  download  speeds, 
and  in  fact,  you  are  more  likely  to  find  that  your  upload  speeds  are 
limited  to  128  or  even  64  Kbps! 
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The  best  way  to  test 
your  speeds  is  to  make 
your  site  live  and  ask  a 
friend  with  a  broadband 
connection  to  help  you 
test  it.  Perhaps  the  sim- 
plest way  to  get  a  site  up  is 
to  use  EasyPHP,  as  we've 
mentioned  earlier  in  this 
book.  You  can  just  use 
EasyPHP  as  your  Web  serv- 
er, even  if  your  site  is 

HTML-based  and  not  PHP/MySQL-based,  because  all  you  need  to  do 
is  place  all  the  files  in  the  ".\EasyPHP\www\"  directory  and  then 
go  to  http://localhost/  to  check  it. 


Mrs  of/ 

d  ■-  J' 

If  w  fit.        |  ««..  j_ 

You  can  use  EasyPHP  itself  to  host  your  site 


Now,  for  a  friend  to  be  able  to  help  you  test  it,  you  need  to  have 
an  IP  address.  A  lot  of  ISPs  will  not  give  you  a  public  IP  address  (an 
IP  that's  accessible  from  the  Internet),  so  if  your  ISP  is  one  of  those, 
you're  out  of  luck.  If  you  do  have  a  public  IP  address,  however,  you 
can  go  ahead  and  host  your  site. 


10.1.2  Getting  set  to  host 

In  order  to  find  your  IP  address,  visit  www.whatsmyip.org  or 
www.shomyip.com  and 


note  down  your  IP.  If  you 
go  to  whatsmyip.org,  click 
on  your  IP  address  on  the 
top  (it's  a  link)  to  see  more 
information  about  your  IP 
and  your  ISP. 

Now,  you  have  to  figure 
out  whether  you  IP 
changes  or  not,  so  it's  best 
to  call  up  your  ISP's  help 
desk  and  find  this  out.  If  it 


More  Info  About  Me 


Check  your  IP  at  whatismyip.org 
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does,  you  will  need  to  get 
some  software  that  auto- 
matically changes  the  DNS 
records  to  point  to  a  single 
URL,  so  that  your  site  will 
always  be  accessible. 
Thankfully,  there  are  many 
such  software  and  services 
that  are  totally  free. 


Find  your  name  servers  at  your  domain 
registrar's  site 


Since  changes  in  a  Top 
Level  Domain  (TLD)  take 
quite  some  time  to  be 

updated,  it's  best  that  you  use  a  service  such  as  www.no-ip.com, 
get  a  yoursite.no-ip.com  sub-domain,  and  then  use  a  free  DNS  serv- 
ice such  as  ZoneEdit.com  to  Web-forward  www.yoursite.com  to 
yoursite.no-ip.com  with  the  option  to  mask.  Yes,  this  may  sound 
like  Greek  to  some,  but  we'll  explain  it  all. 


When  you  buy  a  domain  from  a  registrar,  it  assigns  its  own 
name  servers  for  your  site.  A  name  server  is  what  tells  someone  try- 
ing to  visit  www.yoursite.com  where  that  person's  browser  should 
go.  This  is  generally  something  like  pointing  http://localhost/  to 
http://127.0.0.1/.  Without  any  name  servers,  no  browser  would 
know  which  IP  or  page  to  go  to  when  you  type  in  a  URL.  Now,  since 
there  are  millions  of  Web  sites  online,  and  only  13  root  servers 
across  the  globe,  those  13  servers  cannot  handle  all  the  traffic  of 
the  Internet.  So,  many  other  DNS  servers  keep  log  records  of 
domains  and  their  resolved  IP  addresses,  and  only  connect  to  a 
root  server  after  quite  some  time  to  update  their  records.  There  are 
even  further  sub-categories  of  DNS  servers  which  connect  to  the 
servers  that  connect  to  the  root,  and  so  on.  So,  as  you  can  imagine, 
with  the  sheer  amount  of  DNS  servers  that  are  online  talking  to 
each  other,  it  can  take  days  before  a  TLD  DNS  record  is  updated. 

For  sub-domains,  such  as  yoursite.no-ip.com,  the  TLD  is  no-ip.com, 
and  this  never  changes— so  whenever  someone  types  in  yoursite.no- 
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ip.com,  they  are  sent  to  the 
no-ip.com  name  servers, 
which  contain  the  most  up- 
to-date  IP  for  your  computer. 
This  is  because  no-ip.com 
gives  you  a  client  software 
that  runs  as  a  service  on  your 
PC      and  automatically 


updates  your  IP  as  soon  as    Use  n°-'P  t0  alwavs  point  a  subdomain  to 
,  j  ,T  .     your  dynamic  IP 

you  re  connected  to  the  Net. 

As  long  as  you  keep  your  computer  online,  yoursite.no-ip.com  will 
point  to  it,  and  anyone  will  be  able  to  access  it  using  that  URL. 


However,  you  have  paid  for  a  domain,  and  don't  really  want  to 
have  no-ip's  name  associated  with  your  site,  even  if  you  are  using 
their  services  for  free— it's  not  as  cool  as  www.yoursite.com!  After 
you've  set  up  your  computer  to  point  to  a  fixed  URL  in  no-ip.com  (or 
any  similar  service),  go  to  www.zoneedit.com  and  register  yourself 
and  your  domain  there  for  DNS  services.  ZoneEdit  is  a  completely 
free  service  for  up  to  five  domains  (TLDs),  and  for  the  life  of  us  we 
cannot  figure  their  business  model,  because  they  don't  advertise  or 
anything,  but  we  sure  are  thankful  for  their  services! 

Anyway,  once  you  have  registered  and  added  your  domain  name 
to  ZoneEdit,  you  will  be  given  two  ZoneEdit  name  servers  (like 
nsl2.zoneedit.com  and  nsl5.zoneedit.com)  for  your  domain.  You  will 
need  to  go  to  your  registrar's  site  (where  you  bought  your  domain) 
and  change  the  name  servers  to  the  ones  ZoneEdit  gives  you. 

You  should  set  a  "Web  forward"  from  ZoneEdit  to  your  dynam- 
ic DNS  providers  sub-domain  (e.g.  yoursite.no-ip.com)  for  both 
www.yourdomain.com  and  yourdomain.com  as  well.  In  a  few 
hours  at  the  maximum,  you  should  be  able  to  access  your  com- 
puter by  typing  in  www.yourdomain.com,  as  should  everyone  else 
in  the  world!  Just  make  sure  you  don't  remove  the  dynamic  DNS 
updater's  client  software  from  Startup  or  services  and  that  you're 
always  connected  to  the  Net. 
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10.2  Uploading  Your  Site 


If  you've  decided  to  get 
hosting  instead  of  hosting 
your  own  site,  you  will 
first  need  to  go  through 
the  very  first  chapter  in 
this  book  to  understand 
how  to  choose  a  hosting 
provider.  You  will  also 
find  various  plans,  and  at 
various  prices,  or  might 


— 
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An  example  of  ad-supported  hosting 


even  find  free  ad-supported  hosting.  If  you're  OK  with  ad-support- 
ed free  hosting— where  an  advertisement  is  placed  on  your  site  by 
the  hosting  provider— first  check  to  look  for  offers  from  your  reg- 
istrar itself.  GoDaddy.com,  for  example,  is  one  of  the  world's 
biggest  registrars,  and  provides  free  ad-supported  hosting  with  e- 
mail  as  well  with  every  domain  purchase.* 
'This  is  a  current  offer  subject  to  change. 

The  choice  is  yours,  and  once  you've  bought  hosting,  you  need 
to  upload  your  site  from  your  computer  to  the  Web  server.  In  order 
to  do  this,  you  will  need  an  FTP  client,  or  else  you  might  end  up 
losing  a  connection  after  98  per  cent  is  uploaded,  and  have  to  do 
it  all  over  again— it's  happened  to  people! 


Now,  FTP  clients  are  a 
dime  a  dozen,  and 
there's  no  real  "best" 
software  in  this  category. 
However,  you  will  find 
many  free  and  paid 
options,  and  to  be  hon- 
est, we  think  paying  for 
an  FTP  client,  no  matter 
how  many  features  it 
claims  to  offer,  is  a  com- 


AceFTP  Freeware  will  allow  you  to  upload 
files  and  folders  recursively 
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plete  waste  of  money.  Just  make  sure  you  look  for  one  very 
important  feature:  uploading  "folders  recursively"!  What  this 
means  is  that  if  you  drag  a  folder  from  your  local  computer  to 
transfer  it  to  your  FTP  server,  it  will  upload  the  folder  and  all  its 
sub-folders  and  files  in  the  exact  same  folder  and  file  structure 
as  it  is  on  your  local  machine. 

We  use  AceFTP  3  Freeware  (www.visicommedia.com/down- 
load)  ourselves,  and  you  should  try  it.  Remember,  there's  an 
AceFTP  Pro  version  also,  so  make  sure  you  download  the  "AceFTP 
Freeware"  version! 

Once  you  have  your  FTP  client  installed,  use  the  username 
and  password  that  your  hosting  provider  gave  you  and  connect 
from  within  the  client  to  your  site  and  upload  everything  in 
your  local  Web  site's  root  directory  to  the  root  directory  of  the 
Web  server.  If  you're  using  EasyPHP  and  have  your  site  in  a  fold- 
er called,  say,  "Site,"  you  should  upload  everything  in  the  "Site" 
folder  on  your  local  hard  drive  (exactly  the  way  it  is)  to  your  Web 
server's  root  folder  (most  often  the  folder  that  the  FTP  client 
connects  to). 

If  you  are  using  a  PHP/MySQL-based  site,  you  will  also  need  to 
take  an  SQL  dump  from  your  local  site  and  upload  it  to  your  Web 
server's  MySQL  database.  The  dump  will  be  in  a  *.sql  format,  and 
you  can  go  to  your  server's  SQL  admin  (phpMyAdmin  for  example) 
interface  and  upload  the  *.sql  file. 
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10.3  Testing  The  Site 


Once  your  site  is  uploaded,  you  can  navigate  to  it  and  start  going 
through  it  to  make  sure  everything  is  OK.  The  reason  you  have 
to  check  your  site  is  that  very  often,  when  transferring  the  site 
from  your  local  machine  to  a  Web  server,  links  get  skewed.  You 
might  have  uploaded  a  few  files  into  the  wrong  folder,  or  a  few 
files  might  not  have  uploaded  properly  (or  at  all).  If  you  built 
your  own  HTML  site  with  a  Web  page  editor,  especially  a  site  that 
has  over  40  pages,  you  might  have  missed  a  link  or  two  which 
point  to  something  on  your  local  hard  drive  instead  of  a  relative 
link  to  a  folder.  This  means  that  you  have  a  few  images  or  links 
on  your  site  that  point  to  something  like  "C:\Documents  and 
Settings\  Administrator\My  Documents\My  Webs\Site\abc. 
html"  instead  of  just  "/abc.html".  As  a  result,  it's  obvious  that 
you're  going  to  get  a  "404  Page  Not  Found"  error  when  you  click 
on  that  link.  This  is  why  you  need  to  check  each  and  every  link, 
image  and  page  for  errors. 

However,  if  you  have  a  site  that's  close  to  a  hundred  pages,  or 
runs  on  a  CMS,  chances  are  you'll  be  too  bored  to  check  all  those  hun- 
dreds of  pages,  or  will  end  up  wasting  too  much  bandwidth.  It's  just 
simpler  to  let  a  robot  do  all  the  work  for  you!  Head  over  to  www.dead- 
links.com  and  type  in  the  URL  of  your  site.  Now  click  "Launch  the  spi- 
der," sit  back,  and  wait  for  it  to  finish  its  job.  The  site's  tool  has  a 
timeout  of  45  minutes,  but  your  site  will  probably  be  checked  way 
before  that.  If  it's  not  done  by  then,  you  have  built  a  site  that's  large 
enough  to  be  a  portal,  and  you  should  seriously  consider  paying  for 
some  of  the  more  professional  site-checking  tools! 

10.3.1  Standards 

In  order  to  check  and  make  sure  that  your  site  conforms  to 
most  common  Web  standards,  you  should  visit  http://uitest.com 
and  enter  your  site's  URL.  You  will  get  a  multitude  of  options 
and  tests,  including  one  which  will  show  you  how  the  Google 
spider  views  your  site  and  how  it  will  show  up  as  a  Google 
search  result. 
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Advanced  users  can 
use  the  W3C  standards 
test  that's  also  avail- 
able at  http:// 
uitest.com.  In  fact, 
there  are  so  many  tests 
at  this  site  that  you  can 
spend  a  day  there  tak- 
ing them  all!  The 
W3C's  official  validator 
is  available  at  http://val- 
idator.w3  .org/ 


UITest.com  * 

High  Quality  Woh  Rtmiijn  i^s 


%  Site  Check  Results  Yfrlnlaion 


Use  sites  such  as  UlTest  to  test  your  site 


10.3.2  Browsers 

The  next  thing  you  need  to  do  is  install  as  many  popular  browsers 
as  you  can  and  check  your  site  with  all  of  them.  Look  for  format- 
ting problems,  skewed  colours  and  the  like.  This  will  most  often 
happen  when  there  is  some  error  in  your  code,  or  your  code  is  not 
W3C-compatible.  You  should  also  get  a  feel  for  navigation  links 
and  whether  the  JavaScript  (if  any)  on  your  pages  is  causing  prob- 
lems, or  if  it  is  an  image  or  text  highlighting  that  doesn't  display 
properly,  etc.  At  the  very  least,  make  sure  you  test  your  site  with 
Internet  Explorer,  Firefox  and  Opera. 

10.3.3  Other  tools 

If  you  apply  gzip  compression  to  your  Web  pages,  you  will  have 
smaller  file  sizes  and  faster  loading  time.  This  is  a  Web  server-sup- 
ported feature,  so  you  will  first  have  to  make  sure  your  server  sup- 
ports gzip  compression.  You  can  check  this  by  visiting  www. 
whatsmyip  .org/mod_gzip_test/. 

For  more  tools  than  you'll  ever  need,  visit  www.softwareqat- 
est.com/qatwebl.html.  Some  of  the  tests  here  are  a  little  old  or  do 
not  exist,  but  over  90  per  cent  still  work. 

Once  you're  done  tweaking  your  site,  you  should  then  look  at 
it  for  search  engine  optimisation. 
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10.4  SEO— Search  Engine  Optimisation 


We  have  already  covered  search  engine  optimisation  in  our 
November  2005  issue  (page  117).  We  will  just  list  a  few  basic  dos 
and  don'ts  here: 

1.  Content  is  all-important.  Make  sure  your  content  mentions  the 
words  you  want  to  optimise  for  often  throughout  your  pages. 
For  example,  if  you  want  to  optimise  for  the  words  "India  tech- 
nology news,"  make  sure  these  three  words  occur  often  in  the 
text,  as  near  as  possible  to  each  other.  Make  sense  of  the  content 
as  well;  just  typing  the  keywords  over  and  over  again  for  no  rea- 
son will  get  you  blacklisted  by  Google  and  other  search  engines. 

2.  Fill  your  keywords  into  the  title  tag  of  the  page. 

3.  Use  them  in  your  meta  tags  as  well. 

4.  Make  sure  every  image  has  "Alt"  text  associated  with  it  so  you 
can  show  up  on  image  searches  as  well. 

5.  Name  your  images  descriptively.  For  example,  try  not  to  call 
your  logo  image  "logo.gif."  Instead,  call  it  something  like  "digit- 
magazine.gif  so  that  search  engines  will  give  it  some  love  when 
searching  for  images. 

6.  Last  but  not  least,  don't  wait  for  a  search  engine  to  find  you.  Tell 
it  about  your  site  by  submitting  your  URL.  Also  make  sure  to  sub- 
mit your  URL  to  as  many  search  engines  as  possible. 

Once  you're  done  with  all  this,  you  will  have  finally  succeeded 
in  becoming  a  Web  designer— all  you  now  need  is  practice,  and  you 
can  improve  upon  your  skills! 
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Looking  at  what  people  have  done  never  hurts.  It  always  helps  to 
observe,  learn  and  assimilate  as  much  as  one  can  about  the 
subject  when  one  is  either  just  beginning,  or  is  a  seasoned  pro. 
Here  are  some  good  starting  points— Web  sites  designed  well  and 
not-so-well.  Look,  observe,  learn! 
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11.1  Dos  And  Don'ts:  The  Dos 


Like  any  Bollywood  producer  will  tell  you,  "We  all  need  a  little 
'inspiration'  once  in  a  while,"  obviously  referring  to  the  script  of  a 
hit  Hollywood  production.  And  just  like  our  counterparts  in  the 
entertainment  industry,  we  too  could  do  with  a  little  "inspiration" 
when  it  comes  to  Web  design.  Here  are  some  exceptionally  well- 
designed  Web  sites  that  just  might  inspire  you  to  create  a  smash- 
ing Web  site! 

11.1.1  Neave  (www.neave.com) 
Paul  Neave's  Web  site  has 
been  around  for  over  five 
years  now,  and  is  an 
object  study  in  the  use  of 
Flash  to  give  a  Web  site  a 
life  of  its  own.  Taking 
interactivity  to  a  whole 
new  level,  Mr  Neave's  Web 
site  is  a  personal  project 
essentially  intended  to 
show  off  what  a  little    Let  V°u,r  imagination,  and  your  mouse, 

run  wild! 

knowledge  of  Flash,  a  lit- 
tle sense  of  style  and  a  little  time  can  do  for  a  Web  site.  The  site  has 
loads  of  fun  stuff  to  do.  Neave  has  his  own  Flash  version  of  the  very 
popular  Google  Earth  (aptly  titled  Flash  Earth),  but  the  most  inter- 
esting section  is  the  section  called  Imagination  which  is  basically 
like  doodling  on  paper,  except  much,  much  neater.  Awesome! 

Design  Lesson:  Symmetry.  Flowing  lines  and  curves  that  are  easy 
on  the  eyes. 

11.1.2  Orisinal  (www.ferryhalim.com/orisinal/) 

Orisinal  is  the  brainchild  of  designer  Ferry  Halim.  Like  Neave,  it, 
too,  is  Flash-based,  and  almost  all  the  content  is  Flash-centric. 
Orisinal  games  are  sometimes  naively  simple,  but  are  always  fun 
to  play.  The  Web  page  is  clean  and  has  scroll-over  "light  up"  but- 
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tons,  with  descriptions  of 
the  games  at  the  bottom 
of  the  page.  Simple  fonts 
and  easy  colours  make  it 
a  pleasurable  experience 
to  browse. 

Design  Lesson:  Simplicity. 
Follow  the  golden  rule: 
when  in  doubt,  simplify. 


Original  games  will  keep  you  occupied  during 
boring  office  days 


11.1.3  Nokia  (www.nolcia.com) 

Mobile  phone  manufacturer  Nokia  proves  once  again  that  user 
interactivity  is  at  the  top  of  their  agenda.  Not  usually  a  Web  site 
one  would  visit  just  for  the  heck  of  it,  Nokia's  Web  presence  is 
almost  as  ubiquitous  as  their  mobile  counterpart.  They  have  pages 
for  every  model  of  cell  phone,  in  almost  every  country  in  which  the 
model  is  available.  The  Web  sites  themselves  are  Flash  wonders  that 
beautifully  guide  you  through  phone  features  and  specifications. 

Design  Lesson:  Functionality.  Get  to  the  point  as  quickly  as  possi- 
ble. The  fewer  the  clicks,  the  better. 


11.1.4  Atom  Films  (www.atomfilms.coni 

For  long  the  home  of  Flash  f^u,.^.-^n^sr. 
films  on  the  Internet,  *_* 
Atom  Films  is  a  library  of 
some  awesome  creativity, 
and  some  pretty  bored 
minds.  The  site  is  very 
easy  to  navigate  and  has 
links  and  buttons  well- 
classified.  The  best  part 
about  the  site  navigation 
is  that  one  can  never  get 
lost,  despite  there  being 
tons  and  tons  of  content. 


Atom  Films  has  very  well-classified  buttons 
and  links 
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Design  Lesson:  The  easier  the  site  is  to  navigate,  the  less  the 
headache  of  getting  to  which  section  one  wants  to  go  to. 

11.1.5  Modesty  Panel  (www.m0dest3rpanel.com) 

Another  personal  experiment  in  Web  design,  Modesty  Panel  is  the 
showcase  of  Margaret  Nissen,  whose  passion  for  photography  and 
quizzes  this  site  brings 
out  beautifully.  There  is 
not  as  much  to  do  at  this 
Web  site  as  there  is  to  see. 
The  "Home"  menu  is  sim- 
ple, and  the  style  flows  to 
the  other  menus  as  well. 
Colours  are  used  brilliant- 
ly at  MP,  and  the  same 
template  is  used  consis- 
tently  in  all  sections.  M°des'y  Panel  shows  a  brilliant  use  of  colour 

J  and  colour  matching 


Design  Lesson:  Colours  can  be  both  very  appealing  and  very  disas- 
trous. Be  careful  while  using  uncommon  colours,  ensuring  that 
the  text  is  easily  visible  over  the  background. 


11.1.6  xBhp  (www.xBhp.com) 

Not  technically  one  of  the  best-looking  sites  on  the  Internet,  we 
chose  xBhp  more  as  an  example  of  an  Indian  site  that  does  its  job 
well.  If  you're  a  biking  enthusiast  in  India,  xBhp  is  your  destination 
for  biking  advice,  chats, 
discussions,  and  a  whole 
lot  of  other  interesting  bik- 
ing stuff.  The  best  part 
about  xBhp  is  that  every 
design  element  on  the 
Web  site  sticks  to  the  cen- 
tral theme— biking. 


Design  Lesson:  Stick  to 
the  subject  of  the  Web  site 


ubojL  8mcles|  i  tolbsE  bikars' 


xBhp  is  a  lesson  in  thinking  straight  and 
showing  it! 
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when  giving  it  design  elements.  Flower  buttons  won't  do  on  a  Web 
site  about  a  nuclear  holocaust. 


11.1.7  10  by  10  (www.tenbyten.org/10xl0.html) 

Taking  news  reporting  to   ^.  „  ,  

a  whole  new  level,  10  by  10 
is  the  work  of  developer 
Jonathan  Harris. 
Essentially,  10  by  10  scours 
the  web  for  RSS  feeds  from 
news  Web  sites  and  puts 
up  a  ten  by  ten  matrix  of 
the  most  popular  news 
pictures  and  stories.  Its 
interface  is  based  on 
Flash,  and  one  can  identi- 


10  10 


Pictures,  pictures  everywhere,  and  stories  so 
easy  to  select 


fy  a  story  by  scrolling  over  the  grid  of  pictures.  Even  with  so  much 
content  (a  hundred  pictures)  on  a  single  page,  the  stories  are  easy 
to  find  and  select. 

11.1.8  M!nd  (http://data.a-icard.com/mind) 

M!nd  is  a  project  that 
analyses  world  trends  and 
sorts  out  the  top  100  in  an 
easily  accessible  menu 
that  shows,  by  category, 
stories  related  to  move- 
ments in  world  business, 
technology  and  human 
lifestyle.  Clicking  on  the 
"articles"  menu  of  the 
homepage  takes  you  to 


Free  your  Mind,  and  the  clutter  of  regular 
news  sites 


the  100  stories  that  the  Web  site  has  identified  as  trend-defining. 
One  can  sort  stories  by  category  and  even  search  within  stories. 


Design  Lesson:  It  is  always  a  good  idea  to  use  a  font  family  when 
designing  a  Web  page. 
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11.1.9  What  is  a  Print  (www.moma.org/whatisapriiit) 

WIAP  is  an  exhibition  of 
the  Museum  of  Modern 
Art  that  describes  the  evo- 
lution of  the  printing 
press,  starting  from  the 
earliest  forms  of  printing. 
The  Web  site  has  good 
illustrations  and  extreme- 
ly easy  navigation,  which 
makes  it  a  pleasure  to 
click  and  learn.  There  is 
also  some  fun  Flash  interactivity  that  really  helps  one  understand 
the  subject  matter  of  the  site  in  depth. 

Design  Lesson:  Illustrations  are  an  efficient  way  to  make  a  point 
when  words  just  won't  do  it. 

11.1.10  Well-designed  Blogs 

For  all  our  blogger  buddies,  here  are  some  neat  blogs  to  check  out 
and  get  some  pointers  from. 

11.1.10.1  Andi  Smith  (www.andismith.com) 

Londoner  Andi  Smith's  blog  is  exactly  what  a  blog  should  be— 
him.  The  easy-loading  images  and  fonts,  combined  with  Smith's 
own  personal  style  make  it  a  fun  read,  and  more  importantly, 
it's  a  blog  that  won't  make  you  wonder  why  the  writer  is  such 
a  loser. 

11.1.10.2  My  Life  With  Bad  English  (http://mylifewithbadenglish. 
blogspot.com/) 

MLWBE  is  the  vlog  (video  blog)  of  Andrei  Litvinov,  who  is  coming 
to  grips  with  America  and  the  English  Language.  If  you  are  a 
casual  blogger,  you  will  know  what  a  difference  it  makes  to  a 
blog  just  by  having  your  own  images  on  it  rather  than  the  regu- 
lar templates. 


Learning  has  never  been  so  much  fun! 


SEE  FAST  TRACK 


WEB  DESIGN 


RESOURCES 


XI 


♦  -  t>  -  /•  ©  ft  1 «w>~Mii  ijj  O  a  -tl 


Your  blog  has  to  be  YOU! 

11.2  Dos  And  Don'ts:  The  Don'ts 


It's  always  easy  telling  people  what  to  do.  However,  telling  them 
the  other  side  of  the  story  is  a  different  ball  game.  Here's  a  short 
introduction  to  a  few  design  disasters  that  you  should  avoid  while 
designing  your  Web  site. 

11.2.1  Clutter 

Like  we've  mentioned, 
simplicity  is  the  most  effi- 
cient way  of  getting  a 
point  across.  Too  much 
text  and  too  many  links  is 
information  overload,  and 
frankly,  one  has  nowhere 
to  go  but  to  another  site.  If 
you  must  have  dozens  of 
links  on  your  site,  make 
sure  they  are  classified  in 
sections  for  easy  navigation. 
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11.2.2  Different  font  sizes 

For  text  content  that  is  of  a  similar  nature,  that  is,  headers,  foot- 
ers, and  body  text,  don't  mess  with  the  font  sizes.  If  one  header  is 
a  size  14  bold,  make  sure  all  your  other  headers  are  size  14  bold. 
Also,  don't  mess  with  the  text  formatting.  If  the  body  text  for  one 
section  is  left  aligned,  it  is  better  to  keep  the  body  text  of  similar 
sections  also  left  aligned.  And  obviously,  get  your  grammar  right. 

11.2.3  Too  many  GIFs,  moving 
elements 

Yes,  yes  we  know  moving  smi- 
leys  are  cool,  but  it  is  not  neces- 
sary to  have  your  whole  page 
full  of  them.  GIFs  also  take 
longer  to  load,  and  can  just  put 
people  off.  It  is  also  not  advis- 
able to  replace  text  with  GIFs  or 
other  animations,  as  this  is  often  confusing— and  selection  of 
obscure  and  unclear  images  will  leave  people  wondering  what  the 
hell  it  was  they  clicked  on. 

11.2.4  Flash  follies 

Flash  is  a  brilliant  design-content  tool  for  your  Web  site,  but  there  is 
a  tendency  to  overuse  it.  Too  much  Flash  in  places  where  simple  HTML 
would  have  done  the  trick  is,  well,  simply  annoying.  Also,  there  are 
some  finer  points  that  one  should  keep  in  mind  when  designing  in 
Flash.  Like  having  a  Skip  Intro  button  if  your  site  has  a  Flash  intro.  Or 
having  a  Sound  On/Off  button  if  there  is  background  music. 

11.2.5  Uncommon  link  colours 

It's  not  a  good  idea  to  use  non-standard  colours  for  links. 
Obviously,  one  must  colour  visited  and  unvisited  links  separately, 
the  latter  being  decidedly  brighter  than  the  former.  Blues  and 
greens  are  generally  accepted  colours  for  unvisited  links,  while 
reds  and  purples  suit  visited  links  best.  Not  underlining  links  is 
another  cause  of  user  irritation  as  one  has  to  guess  or  scrub  the 
page  for  a  link. 
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11.2.6  No  pop-ups! 

First  off,  unless  you're  design- 
ing a  porn  site,  or  one  with 
plenty  of  advertisements,  even 
the  thought  of  a  pop-up  should- 
n't cross  your  mind.  Opening 
clicked  links  in  new  windows, 
or  opening  new  windows  auto- 
matically, must  be  avoided 
unless  absolutely  necessary. 
And  these  days,  browsers  pretty  efficiently  block  pop-ups,  so  it 
becomes  a  pointless  exercise  anyway. 

11.2.7  No  Archives,  No  Repeat  Visitors 

Especially  for  personal  Web  pages,  it  is  a  bad  idea  not  to  have  your 
work  archived  for  easy  reference.  Blog  hosts  usually  provide  this  func- 
tionality within  the  blog  template  itself,  but  if  you're  designing  your 
own  from  scratch,  make  sure  people  can  access  your  old  gems  easily. 

11.2.8  Horizontal  scrolling 

Since  the  inception  of  the  Internet  and  Web  sites,  users  have 
become  accustomed  to  scrolling  top-to-bottom  on  Web  pages.  Very 
rarely  has  one  ever  had  to  scroll  left  to  right  for  anything  unless 
it's  a  large  image.  And  this  is  one  trend  that  one  must  keep  in 
mind  while  designing  a  Web  site.  Also,  make  sure  your  site  is  opti- 
mised for  standard-sized  windows  (the  standards  keep  changing, 
but  800  x  600  is  generally  considered  OK). 

11.2.9  Forget  long  URLs— people  will! 

There's  no  point  having  URLs  that  are  more  than  30  to  35  charac- 
ters long!  Too  many  dots,  dashes,  underscores  and  slashes  don't  do 
much  more  than  confuse  users,  and  the  people  they  are  giving  the 
URL  to.  Keep  your  URLs  short  and  related  to  the  subject  matter  of 
the  Web  pages  they  link  to. 

11.2.10  The  Four-Second  Rule 

If  one  cannot  figure  out  what  the  site  is  about  within  four  seconds 


In  true  Times  style,  indiatimes  has  ads 
everywhere 
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of  looking  at  the  loaded  web  page,  the  site  has  most  probably 
failed  to  make  an  impression  on  the  user.  Make  sure  the  content 
on  your  Web  site  is  crisp  and  to  the  point,  otherwise  the  user  will 
wonder  where  he's  turned  up. 

11.3  Useful  Sites 


There  are  dozens  of  Web  sites  that  give  you  a  great  starting  point 
to  start  your  journey  into  Web  designing.  Here  are  a  few  we 
thought  you  should  check  out. 

11.3.1  Web  Design  Library 
(www.webdesign.org) 

The  Web  Design  Library,  as  the 
name  suggests,  is  a  collection 
of  several  tutorials  and  articles 
on  anything  and  everything 
related  to  Web  design.  From 
HTML  to  Vector  Graphics,  the 
Library  is  a  storehouse  of  some 
very  easy  to  understand  and 
follow  advice  and  tips  and 

tricks  about  Web  design.  The  Web  Design  Basics  section  is  a  great 
place  to  do  some  reading  up  before  starting  to  design  your  own  site. 
Beginners  and  pros  alike  are  sure  to  find  something  here. 


WDL  features  easy 
informative  articles 


tutorials  and 


11.3.2  Web  Developer's 
Handbook 

(www.alvit.de/handbook/) 

Like  the  tagline  aptly  puts 
it,  the  Web  Developer's 
Handbook  is  about  "devel- 
oping Web  sites,  exploring 
own  imagination."  More  for 
someone  who  knows  a  bit 
about     Web  designing 


Links!  More  importantly,  links  that  work! 
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already,  WDH  is  more  than  just  a  handbook  on  Web  designing. 
It's  more  like  a  one-stop  shop  for  everything  a  web  designer  is 
looking  for.  Links  are  divided  by  convenient  and  crisp  sections. 
A  must-visit  if  you  know  you're  looking  for  something,  but  don't 
exactly  know  what  it  is. 


Ll&abilitv  101:  Introduction  to  Usability 


11.3.3  Use  IT 
(www.useit.com) 

Use  IT  is  Web  guru  Jakob 
Nielsen's  Web  site  on 
"useable  information 
technology."  This  is  a 
great  place  to  learn  if  one 
is  developing  a  Web  site 
for  a  company.  Nielsen 
has  loads  of  experience 
consulting  on  Web  usabil- 
ity, and  shares  this  on  his  Web  site.  There  are  some  great  tips  a  devel- 
oper can  get  here  for  B2C  and  B2B  Web  sites.  His  Alertbox  Columns 
are  gems  of  information  on  how  to  make  Web  sites  more  user- 
friendly,  and  how  to  make  sure  one  gets  the  right  return-on-invest- 
ment  for  one's  Web  site. 


wh  st  (Definition  of  Us.ibiitv) 


Learn  more  about  usability  at  useit.com 


11.3.4  CSS  Zen  Garden  (www.csszengarden.com) 

For  anyone  hung  up  on   


CSS,  this  is  definitely  the 
place  to  visit.  The  Zen 
Garden  is  an  attempt  to 
get  CSS  taken  seriously 
by  Web  design  artists. 
Basically,  the  site  allows 
CSS  artists  to  develop 
CSS  stylesheets.  A  bril- 
liant example  of  their 


work  is  seen  by  clicking    Select  a  stylesheet  and  see  the  power  of  CSS! 

the  "Select  a  Design"  links,  which  change  the  design  of  the 
homepage! 
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11.3.5  Web  Pages  That  Suck  (www.webpagesthatsuck.com) 

It's  always  great  to 
learn  from  your  own 
mistakes,  but  it's  defi- 
nitely more  fun,  and 
less  expensive,  to  learn 
from  the  mistakes  of 
others!  WPTS  is  guide  to 
what  your  Web  site 
shouldn't  be  like  if  it 
wants  to  get  popular  A    WPTS-Learn  from  everyone  else's  mistakes 

great  place  for  commonly-made  mistakes  in  Web  design. 
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Does  Your  Web  Site  Use  Bad  W 
Techniques? 
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